您的位置:首页 > Web前端 > JQuery

input 标签如何multiple 上传多张图片 实时在页面显示图片

2016-08-18 17:16 716 查看
通过jquery方式来将input文件一个个用FormData对象接受,同一传给后台,后台对每一个图片文件进行保存

//初始化FormData对象
var formData = new FormData();
//fileName为input的id
var $file = $("#fileName");
var fileObj = $file[0];
var n = fileObj.files.length;
for(var i=0;i<n;i++){
formData.append("file"+i,fileObj.files[i]);
}
通过ajax方式上传给后台接受


在页面实时显示图片,其原理时通过读取本地文件的路径,达到马上显示图片的效果,可以及时对图片进行一个删除重选的操作

//jquery 监视事件,当input输入图片文件时,实时在指定的位置加载图片
var $file = $("#imgFile");
var fileObj = $file[0];
//console.log(fileObj.files.length);
var windowURL = window.URL || window.webkitURL;
var dataURL;
if (fileObj && fileObj.files&&fileObj.files[0]) {
var $img = $("#mainPreview");
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src', dataURL);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息