上传图片 预览效果

标签：

【html 部分】

<div class="form-group field-product-price">

<label class="control-label" for="product-price">上传产品图片</label>

<input type="file" name="product_pic" onchange="preview(this)"/>

<div class="help-block"></div>

</div>

<div id="preview" ></div>   

【js 部分】

<!-- 预览图片 -->
<script type="text/javascript">

function preview(file){

var prevDiv = document.getElementById(‘preview‘);

prevDiv.innerHTML=‘‘;

if (file.files){

var num =file.files.length

for(var i=0;i<num;i++){

var reader = new FileReader();

reader.onload = function(evt){

prevDiv.innerHTML += ‘<img width="100" src="‘ + evt.target.result + ‘" />‘;

}

reader.readAsDataURL(file.files[i]);

}

}

}

</script>

上传图片 预览效果

标签：

原文地址：http://www.cnblogs.com/www-xiaobo-com/p/5817361.html