实用插件（十）ajax图片上传插件—

前言

刚开始使用的是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, textStatus, errorThrown) {console.log(result);console.log(textStatus);console.log(jqXHR);})/* .complete(function (result, textStatus, jqXHR) {console.log(result);console.log(textStatus);console.log(jqXHR);})*/;}</script>
</body></html>

4.配置API

点我查看详细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,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,0,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;
}

2.用法：引入1个css文件、1个js文件

<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","png","bmp","jpeg"],   // 上传文件的类型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","click",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, 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;}})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, textStatus, 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, textStatus, errorThrown) {console.log(result);console.log(textStatus);console.log(jqXHR);})/* .complete(function (result, textStatus, 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表单文件上传。

实用插件（十）ajax图片上传插件——fileupload相关推荐

ajax图片上传插件demo,jQuery 自制上传头像插件-附带Demo实例（ajaxfileupload.js第三弹）...
这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章的一个收关.但是最初也是因为想做这么一个功能,一点一点的引发出了好多问题,不断去学习,研究,才写了这三篇. 早些时候已经实现了上 ...
java 图片上传控件_Javashop 图片上传插件使用指南
一.概述 Javashop 图片上传插件是一款基于WebUploader插件所封装的上传图片插件. 可用于快速生成上传图片页面,有如下特点: 基于freemarker指令模式所编写,只需一个指令,并且 ...
think php上传图片,基于ThinkPHP5.0实现图片上传插件
这篇文章主要介绍了关于基于ThinkPHP5.0实现图片上传插件,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 thinkphp5.0 图片上传插件可预览裁剪图片和保存原图片,执行裁剪 ...
WebUploader文件图片上传插件的使用
最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...
jquery.photoClip.js图片上传插件带拖动裁剪
下载地址 jquery.photoClip.js是一款图片上传插件,可以拖动选择裁剪的区域. dd:
php 上传图片控件,ThinkPHP5.0实现图片上传插件实例分享
thinkphp5.0 图片上传插件可预览裁剪图片和保存原图片,执行裁剪图片后会删除裁剪的原图片目录,以便减少空间.具体实现代码大家参考下本文,希望能帮助到大家. 效果预览图: 该插件主要功能是:可 ...
uniapp 图片上传插件使用说明
插件地址:https://ext.dcloud.net.cn/plugin?id=4589 使用说明本插件是一个云端上传插件,能够将本地的文件包括图片上传到云存储,ImageX是火山引擎推出的专业图 ...
ajax 不能上传图片,自己动手打造ajax图片上传(网上没有的)
今天笔者需要一款图片上传插件,但是网上没有提供一款符合自己需求且好用的.于是就自己动手写了一个. 方法1,仅使用jquery代码,不用第三方插件.代码如下上传图片 $(function() { $( ...
ajax图片上传(asp.net +jquery+ashx)
一.建立Default.aspx页面 [csharp] view plaincopy <%@ Page Language="C#" AutoEventWireup=" ...
php模板多图上传插件,PHP+jQuery+Ajax多图片上传插件
注:本地预览无效,需要在服务断运行使用方法 HTML 首先我们在页面上放置个上传按钮,使用POST提交到ajax.php.#ul_pics 用来显示上传完毕后的图片.关于按钮.进度条.图片垂直居中样 ...

实用插件（十）ajax图片上传插件——fileupload

前言

fileupload（jQuery File Upload）

上传后预览插件imgUp

实用插件（十）ajax图片上传插件——fileupload相关推荐

最新文章

热门文章