前言
刚开始使用的是ajaxFileUpload插件，但是按照其他人的博文所说，直接使用data来传入参数，会报错跨域。如图：
已经尝试网上各种方法，然而都是徒劳，比如修改域名，修改jsonp，修改ajaxFileUpload.js的代码……
表示很绝望！！！希望看见本博文的大神多多指教，感谢！
ajaxFileUpload实现原理：
它是动态的去创建一个iframe和一个form，然后clone（克隆）页面中的到这个form中，之后提交这个动态创建的form，这样后台就能知道你想上传的文件是什么了，返回的内容显示到动态iframe中，更重要的是这是一个无刷新的上传！。
换新插件—
fileupload（jQuery File Upload）
1.下载 fileupload插件
2.用法：引入两个js文件
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.fileupload.js"></script>
3.demo
<html>
<head>
<Meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- <script src="js/ajaxfileupload.js" type="text/javascript"></script> -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.fileupload.js"></script>
</head>
<body>
<p><input type="file" id="file1" name="file" multiple/></p>
<input type="button" value="上传" id="btn1"/>
<p><img id="img1" alt="上传成功啦" src="" /></p>
<a id="btn2" >获取图片</a>
<script type="text/javascript"> var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MTYwNjIxNTEsImhlYWRwaG90byI6Imh0dHA6Ly9zdGF0aWMwMi5qeWp5YXBwLmNvbS9oZC8yMDE3LTA4LTAxLzE1ZjRhZWQzLTU0Y2ItNDE4ZS05YmZiLWYzODViNWM3ZGM0YV9uZXcucG5nIiwiY21zdXNlcmlkIjoiMjUiLCJsb2dvdXJsIjoiaHR0cDovL25jcnN0YXRpYy5vc3MtY24taGFuZ3pob3UuYWxpeXVuY3MuY29tL2p5anlpbWFnZS9uZXdzLzIwMTcwMzI1LzAyNDkxZTEzLWZkZTgtNDM3ZS05MDFhLWYyMWMzNmUxZmRlNC5wbmciLCJvcmdpZCI6IjE2MSIsIm5hbWUiOiLmlZnluIg2NCIsInNpdGVpZCI6IjIxNSIsInNjaG9vbGd1aWQiOiIzYTZlYjBlNjIzMzQxMWU3YThlYzAwMTU1ZDAwZDIwYSIsInNpdGV1cmwiOiJodHRwOi8vY21zLW5qLW5ldy5vYXRlc3Quc3ouY29tOjM5ODAvb2EtY21zLW5qIn0.NiP-V2VQKbuUNMvZtNv0Aat-lF6GHzmJA14mYXxTAZo"; $(function () { $("#file1").click(function () { if ($("#file1").val().length > 0) { ajaxFileUpload1(); } else { alert("请选择图片"); } }) }) function ajaxFileUpload1() { $('#file1').fileupload({ url: 'http://192.168.0.217:3088/oa-room-booking/app/picture/upload.htm',sequentialUploads: true,formData: { "noteId":"485","token":token } }); var filesList = $('#file1').prop('files'); var jqXHR = $('#file1').fileupload('send',{files: filesList}) .success(function (result,textStatus,jqXHR) { console.log(result.showfilename); console.log(result.imgPath); $("#img1").attr("src",result.imgPath); }) .error(function (jqXHR,errorThrown) { console.log(result); console.log(textStatus); console.log(jqXHR); }) /* .complete(function (result,jqXHR) { console.log(result); console.log(textStatus); console.log(jqXHR); })*/ ; } </script>
</body>
</html>
4.配置API
上传后预览插件imgUp
用法：
1.1.imgUp.js插件源码：
$(function(){
var delParent;
var defaults = {
fileType : ["jpg","png","bmp","jpeg"],// 上传文件的类型
fileSize : 1024 * 1024 * 10 // 上传文件的大小 10M
};
/*点击图片的文本框*/
$(".file").change(function(){
var idFile = $(this).attr("id");
var file = document.getElementById(idFile);
var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
var fileList = file.files; //获取的图片文件
console.log(fileList+"======filelist=====");
var input = $(this).parent();//文本框的父亲元素
var imgArr = [];
//遍历得到的图片文件
var numUp = imgContainer.find(".up-section").length;
var totalNum = numUp + fileList.length; //总的数量
if(fileList.length > 5 || totalNum > 5 ){
alert("上传图片数目不可以超过5个，请重新选择"); //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
}
else if(numUp < 5){
fileList = validateUp(fileList);
for(var i = 0;i<fileList.length;i++){
var imgUrl = window.URL.createObjectURL(fileList[i]);
imgArr.push(imgUrl);
var $section = $("<section class='up-section fl loading'>");
imgContainer.prepend($section);
var $span = $("<span class='up-span'>");
$span.appendTo($section);
var $img0 = $("<img class='close-upimg'>").on("click",function(event){
event.preventDefault();
event.stopPropagation();
$(".works-mask").show();
delParent = $(this).parent();
});
$img0.attr("src","img/a7.png").appendTo($section);
var $img = $("<img class='up-img up-opcity'>");
$img.attr("src",imgArr[i]);
$img.appendTo($section);
var $p = $("<p class='img-name-p'>");
$p.html(fileList[i].name).appendTo($section);
var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
$input.appendTo($section);
var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
$input2.appendTo($section);
}
}
setTimeout(function(){
$(".up-section").removeClass("loading");
$(".up-img").removeClass("up-opcity");
},450);
numUp = imgContainer.find(".up-section").length;
if(numUp >= 5){
$(this).parent().hide();
}
//input内容清空
$(this).val("");
});
$(".z_photo").delegate(".close-upimg","click",function(){
$(".works-mask").show();
delParent = $(this).parent();
});
$(".wsdel-ok").click(function(){
$(".works-mask").hide();
var numUp = delParent.siblings().length;
if(numUp < 6){
delParent.parent().find(".z_file").show();
}
delParent.remove();
});
$(".wsdel-no").click(function(){
$(".works-mask").hide();
});
function validateUp(files){
var arrFiles = [];//替换的文件数组
for(var i = 0,file; file = files[i]; i++){
//获取文件上传的后缀名
var newStr = file.name.split("").reverse().join("");
if(newStr.split(".")[0] != null){
var type = newStr.split(".")[0].split("").reverse().join("");
console.log(type+"===type===");
if(jQuery.inArray(type,defaults.fileType) > -1){
// 类型符合，可以上传
if (file.size >= defaults.fileSize) {
alert(file.size);
alert('您这个"'+ file.name +'"文件大小过大');
} else {
// 在这里需要判断当前所有文件中
arrFiles.push(file);
}
}else{
alert('您这个"'+ file.name +'"上传类型不符合');
}
}else{
alert('您这个"'+ file.name +'"没有类型,无法识别');
}
}
return arrFiles;
}
})
1.2 imgUp.css
/*上传图片插件的样式*/
.img-Box{ margin-top: 40px; }
.img-Box .up-p{ margin-bottom: 20px; font-size: 16px; color: #555; }
.z_photo{ padding: 18px; border:2px dashed #E7E6E6; /*padding: 18px;*/ }
.z_photo .z_file{ position: relative; }
.z_file .file{ width: 100%; height: 100%; opacity: 0; position: absolute; top: 0px; left: 0px; z-index: 100; }
.z_photo .up-section{ position: relative; margin-right: 20px; margin-bottom: 20px; }
.up-section .close-upimg{ position: absolute; top: 6px; right: 8px; display: none; z-index: 10; }
.up-section .up-span{ display: block; width: 100%; height: 100%; visibility: hidden; position: absolute; top: 0px; left: 0px; z-index: 9; background: rgba(0,0,.5); }
.up-section:hover{ border: 2px solid #f15134; }
.up-section:hover .close-upimg{ display: block; }
.up-section:hover .up-span{ visibility: visible; }
.z_photo .up-img{ display: block; width: 100%; height: 100%; }
.loading{ border: 1px solid #D1D1D1; background:url(../img/loading.gif) no-repeat center; }
.up-opcity{ opacity: 0; }
.img-name-p{ display: none; }
.upimg-div .up-section { width: 190px; height: 180px; }
.img-Box .upimg-div .z_file { width: 190px; height: 180px; }
.z_file .add-img { display: block; width: 190px; height: 180px; }
/*遮罩层样式*/
.mask{ z-index: 1000; display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,.4); }
.mask .mask-content{ width: 500px; position: absolute; top: 50%; left: 50%; margin-left: -250px; margin-top: -80px; background: white; height: 160px; text-align: center; }
.mask .mask-content .del-p{ color: #555; height: 94px; line-height: 94px; font-size: 18px; border-bottom: 1px solid #D1D1D1; }
.mask-content .check-p{ height: 66px; line-height: 66px; position: absolute; bottom: 0px; left: 0px; width: 100%; }
.mask-content .check-p span{ width: 49%; display:inline-block; text-align: center; color:#d4361d ; font-size: 18px; }
.check-p .del-com{ border-right: 1px solid #D1D1D1; }
<link rel="stylesheet" href="../css/imgUp.css"/>
<script src="../js/imgUp.js"></script>
3.效果图：
PS:imgUp.js需要配合fileupload一起使用（imgUp.js配合imgplugj.s也可以上传图片，但是不方便传多个参数）
例如（配合fileupload）：
var NO = 3;//最多可以上传NO张图片
$(function(){
var delParent;
var defaults = {
fileType : ["jpg",// 上传文件的类型
fileSize : 1024 * 1024 * 10 // 上传文件的大小 10M
};
/*点击图片的文本框*/
$("#file1").change(function(){
if($(this).attr("data-NO")){
NO = $(this).attr("data-NO");
}
console.log("最多可以上传张数：",NO)
var idFile = $(this).attr("id");
var file = document.getElementById(idFile);
var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
var fileList = file.files; //获取的图片文件
console.log(fileList+"======filelist=====");
var input = $(this).parent();//文本框的父亲元素
var imgArr = [];
//遍历得到的图片文件
var numUp = imgContainer.find(".up-section").length;
var totalNum = numUp + fileList.length; //总的数量
if(fileList.length > NO || totalNum > NO ){
alert("上传图片数目不可以超过"+NO+"个，请重新选择"); //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
}
else if(numUp < NO){
fileList = validateUp(fileList);
for(var i = 0;i<fileList.length;i++){
var imgUrl = window.URL.createObjectURL(fileList[i]);
imgArr.push(imgUrl);
var $section = $("<section class='up-section fl loading'>");
imgContainer.prepend($section);
var $span = $("<span class='up-span'>");
$(".z_file").before($section);
var $img0 = $("<img class='close-upimg'>").on("click",function(event){//点击删除按钮
event.preventDefault();
event.stopPropagation();
$(".works-mask").show();
delParent = $(this).parent();
$(".wsdel-ok").attr("data-uuid",$(this).attr("data-uuid"));//把随机标志符绑定到确定按钮上
});
$img0.attr("src","img/a7.png").css("width","15px").appendTo($section);
//根据项目修改
var $img = $("<img class='up-img up-opcity'>");
$img.attr("src",imgArr[i]);
/*var $a = $("<a></a>"); $img.appendTo($a); $a.attr("href",imgArr[i]);*/
$img.appendTo($section);
var $p = $("<p class='img-name-p'>");
$p.html(fileList[i].name).appendTo($section);
var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
$input.appendTo($section);
var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
$input2.appendTo($section);
}
//上传图片
ajaxFileUpload1($(this).attr("data-type"));//在此处调用fileupload插件！！！
}
setTimeout(function(){
$(".up-section").removeClass("loading");
$(".up-img").removeClass("up-opcity");
},450);
numUp = imgContainer.find(".up-section").length;
if(numUp >= NO){
$(this).parent().hide();
}
//input内容清空
$(this).val("");
});
$(".z_photo").delegate(".close-upimg",function(){
$(".works-mask").show();
delParent = $(this).parent();
});
$(".wsdel-ok").click(function(){//确定删除
$(".works-mask").hide();
var numUp = delParent.siblings().length;
if(numUp < (NO+3)){
delParent.parent().find(".z_file").show();
}
delParent.remove();//删除图片
//把该图片的标志符从数组中移除
uuids.remove($(this).attr("data-uuid"));
console.log("删除后的uuids：",uuids);
setCookie("uuids",uuids);
//发请求把该图片从数据库中删除
$.ajax({
url: base+'/app/picture/delPicture.htm',type: 'POST',data: {
"uuid":$(this).attr("data-uuid"),"token":token
},success: function (res) {
if(res.code == '0'){
console.log(res);
}
}
});
});
$(".wsdel-no").click(function(){
$(".works-mask").hide();
});
function validateUp(files){
var arrFiles = [];//替换的文件数组
for(var i = 0,无法识别');
}
}
return arrFiles;
}
})
var uuids = new Array();
function ajaxFileUpload1(a,b) {
var nid = $("#nid").attr("data-id");
if(!$("#nid").attr("data-id")){
nid = $(".endinput").attr("data-id");
}
var guid = new GUID();
var uuid = guid.newGUID();
uuids.push(uuid);//随机字符串组成的数组
console.log("本次添加的uuid：",uuid);
console.log("添加后的uuids：",uuids);
setCookie("uuids",666);
$(".z_photo").attr("data-uuid",uuids);//父容器 绑定 所有的随机字符串组成的数组
$(".z_photo .close-upimg:first").attr("data-uuid",uuid);//关闭按钮 绑定 对应图片的随机字符串
//uuid = null;
$("#file1").fileupload({
url: base+'/app/picture/upload.htm',//async: false,
sequentialUploads: true,formData: {
"uuid":uuid,"noteId":nid,"type":a,"token":token
}
});
var filesList = $("#file1").prop('files');
var jqXHR = $("#file1").fileupload('send',{files: filesList})
.success(function (result,jqXHR) {
console.log(result.showfilename);
console.log(result.imgPath);
//$(".z_photo").find(".up-img").wrap('<a href="'+result.imgPath+'"></a');
//$(".pics a").photoSwipe();
})
.error(function (jqXHR,errorThrown) {
console.log(result);
console.log(textStatus);
console.log(jqXHR);
})
/* .complete(function (result,jqXHR) { console.log(result); console.log(textStatus); console.log(jqXHR); })*/
;
}
备注：此例子中，fileupload并没有用到success返回的图片，预览的图片实际上是用的imgUp插件直接从本地获取的图片。
换言之，此例子中，fileupload只是单纯的上传，无须返回；imgUp只负责获取本地图片并展示。
补充：
jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
jQuery File Upload有多个文件选择，拖放上传控件拖放支持，进度条，验证和预览图像，音频和视频 。
支持跨域，分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台（PHP,Python,Ruby on Rails,Java,Node.js,Go etc.） ，支持标准的HTML表单文件上传。
