我用下文所示代码书写时,似乎一次只传一张
var formData = new FormData();
formData.append('file', $('#file1')[0].files[0]);
formData.append('file', $('#file2')[0].files[0]);
formData.append('file', $('#file3')[0].files[0]);
formData.append("fname",fname);
formData.append("fprice",fprice);
formData.append("fdetail",fdetail);
formData.append("meterial",meterial);
$.ajax({
url : "./insert",
type : "POST",
data :formData,
async : true,
cache : false,
contentType : false,
processData : false,
success : function(data) {
if(data=="success"){
alert("添加成功!")
window.location.href="#"
}else{
alert("添加失败!")
}
}
});
在查阅资料后发现一个网站有相关资料(包含演示效果):http://www.17sucai.com/pins/demo-show?id=26463
分析后发现他是自己有个 uploadImg.js,上传照片时调用该 js 文件,代码如下:
var imgSrc = []; //图片路径
var imgFile = []; //文件流
var imgName = []; //图片名字
//选择图片
function imgUpload(obj) {
var oInput = '#' + obj.inputId;
var imgBox = '#' + obj.imgBox;
var btn = '#' + obj.buttonId;
$(oInput).on("change", function() {
var fileImg = $(oInput)[0];
var fileList = fileImg.files;
for(var i = 0; i < fileList.length; i++) {
var imgSrcI = getObjectURL(fileList[i]);
imgName.push(fileList[i].name);
imgSrc.push(imgSrcI);
imgFile.push(fileList[i]);
}
addNewContent(imgBox);
})
$(btn).on('click', function() {
var data = new Object;
data[obj.data] = imgFile;
submitPicture(obj.upUrl, data);
})
}
//图片展示
function addNewContent(obj) {
$(imgBox).html("");
for(var a = 0; a < imgSrc.length; a++) {
var oldBox = $(obj).html();
$(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' onclick="imgDisplay(this)"><p onclick="removeImg(this,' + a + ')" class="imgDelete">删除</p></div>');
}
}
//删除
function removeImg(obj, index) {
imgSrc.splice(index, 1);
imgFile.splice(index, 1);
imgName.splice(index, 1);
var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
addNewContent(boxId);
}
//上传(将文件流数组传到后台)
function submitPicture(url,data) {
console.log(data);
alert('请打开控制台查看传递参数!');
if(url&&data){
$.ajax({
type: "post",
url: url,
async: true,
data: data,
traditional: true,
success: function(dat) {
// console.log(dat);
}
});
}
}
//图片灯箱
function imgDisplay(obj) {
var src = $(obj).attr("src");
var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;"><img src=' + src + ' style="margin-top: 100px;width: 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" onclick="closePicture(this)">×</p></div>'
$('body').append(imgHtml);
}
//关闭
function closePicture(obj) {
$(obj).parent("div").remove();
}
//图片预览路径
function getObjectURL(file) {
var url = null;
if(window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if(window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
调用时如下:
<script src="js/uploadImg.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
imgUpload({
inputId:'file', //input框id
imgBox:'imgBox', //图片容器id
buttonId:'btn', //提交按钮id
upUrl:'', //提交地址
data:'file1' //参数名
})
</script>