单个文件:
<div>
<input value="上传" type="file" id="photos_upload">
<img src="" id="result" width="100px" height="100px"/>
</div>
<script>
$("#photos_upload").on("change",function () {
var file = $(this)[0].files[0]; //document.getElementById('photos_upload').files[0];
var reader = new FileReader();
reader.onload = function ( event ) {
var txt = event.target.result; //base64
document.getElementById("result").src = txt;
};
reader.readAsDataURL(file);
})
</script>
多个文件:(只需在单个文件的基础上添加递归)
<div>
<input value="上传" type="file" id="photos_upload" multiple>
<img src="" class="re1" width="100px" height="100px"/>
<img src="" class="re2" width="100px" height="100px"/>
</div>
$("#photos_upload").on("change",function (event) {
var i=0;
fileUpload(0,event);
})
function fileUpload(i,event){
var length = $(event.target)[0].files.length;
if(i>=length){
return;
}
var file = $(event.target)[0].files[i];
var reader = new FileReader();
reader.onload = function ( event ) {
var txt = event.target.result; //base64
$(".re"+i).attr("src",txt);
};
reader.readAsDataURL(file);
i++;
fileUpload(i,event);
}
![](https://common.cnblogs.com/images/loading.gif)