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

2020-06-29 原文

前言

刚开始使用的是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

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

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",// 上传文件的类型
        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表单文件上传。

实用插件十ajax图片上传插件——fileupload的更多相关文章

基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片功能

这篇文章主要介绍了基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片功能,需要的朋友可以参考下
ios – 订阅来自CBC特性的通知不起作用

现在控制台输出到这里看起来像这样：嘿!它说updateNotification是假的.它来自哪里？为什么,这是我对setNotify的回调…我告诉它要通知！让我们在println的行中设置一个断点并检查错误对象：好的,所以这让我没有想法.我无法找到有关该错误代码的相关线索.自从我尝试为之前发现的特征设置通知以来,我无法理解描述本身,因此它必须存在,对吧？此外,在Android上似乎可以订阅通知,所以我想我可以排除设备的问题……有关这方面的任何线索都非常感谢！
ios – 为什么NSManagedObjectID会发生变化？

我不确定这个问题的格式对这个网站是否有用.基本上,有没有人知道什么使得Apple确保在每次将数据保存到持久存储时NSManagedobjectID发生变化的设计决策？我最大的问题是为什么提供临时的managedobjectID.它有什么意义吗？解决方法我有点困惑为什么你一直说NSManagedobjectID特别是UUID.URI表示可能具有与UUID格式类似的外观,但我没有在文档中看到它表示“NSManagedobjectID是UUID”.为什么Apple以这种方式设计它超出了StackOverflow
ios – 修复ARC中潜在的内存泄漏

以下单例类帮助器方法可能会导致保留周期.在静态分析器中获取警告：“在线路上分配的对象的潜在泄漏……”我确实尝试过使用ivaruuid__weak但是当我分析时仍会出现警告.谢谢像这样在课堂上被召唤：解决方法这会删除警告吗？
ios – 如何从核心蓝牙设备读取信息

>如何阅读蓝牙设备的其他信息？
ios – 在开发过程中应该如何使用identifierForVendor？

解决方法在模拟器中构建和运行时,这个值将会改变.在真实的设备上,只有当用户从设备中删除所有应用并重新安装应用时,才会更改.如果您希望模拟器应用程序在开发期间使用一致的标识符,您可以定义该UUID,并将其用于模拟器构建：请注意,您需要用真实的UUID字符串替换SOME-STATIC-UUID-STRING.
ios – 通过UUID编写CBC特征

我试图用CoreBluetooth写一个特定的,已知的特征.我觉得这应该是可能的,因为我使用了一个德州仪器BLE实用程序,您可以在连接的外设上选择一个“写值”操作,只需输入特征UUID和您要编写的值,并且执行没有问题.据我了解,为了做到这一点,我必须打电话配置为具有正确的UUID的CBC特征对象.我已经尝试使用正确的UUID进行CBMutableCharacteristic,甚至正确的权限,我知道
ios – 扫描特定CBUUID时,Core Bluetooth无法找到外围设备

似乎这个问题被“回答”了here,但没有任何代码来表明他们做了不同的事情,我不得不问一个新问题.我有自己的代码具有相同的行为,在OSX上使用CoreBluetooth的CBCentralManager扫描特定的CBUUID并没有发现一个iOS设备充当CBPeripheralManager的外围设备(除非它及其服务先前已被发现).为了查看我的代码是否有问题,我下载了Apple’ssamplecode
如何在不使用登录系统的情况下识别唯一用户(iOS)

我可以从设备获得的任何类型,而无需用户填写任何字段.解决方法您可以尝试使用存储在用户的iCloud中的键值存储中的一些唯一随机字符串.因此,当用户第一次启动您的应用时,您会发现他的iCloud没有存储任何值,因此您生成并存储它.当用户下次启动应用程序时,您将看到此值,并将采取相应措施.更重要的是,即使用户将重新安装您的应用程序或将重置设备,您仍然可以在他的iCloud中按值识别用户.
iBeaconswift

随着这一技术的发展，苹果在2013年WWDC大会上，苹果推出iBeacon技术。该技术允许开发人员开发能够使用iBeacon硬件传感器的iOS应用程序，来为相应的应用程序提供更加精准的位置信息。2014年WWDC大会上，苹果表示，对iBeacon技术进行了改善，借助该技术，应用程序现在能够跟踪到用户所在的楼层的精确位置信息。iBeacon的工作方式是Transmitter-Receiver，即基站-接收机模式的。这里列举个iBeacon的使用场景：在房屋中介中使用。

随机推荐

xe-ajax-mock 前端虚拟服务

最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。
vue 使用 xe-ajax

安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue
AJAX POST数据中文乱码解决

前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具
Koa2框架利用CORS完成跨域ajax请求

实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。
form提交时，ajax上传文件并更新到<input>中的value字段
ajax的cache作用

filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。
浅谈ajax上传文件属性contentType = false

默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,
909422229_ajaxFileUpload上传文件

ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error
AJAX-Cache：一款好用的Ajax缓存插件

原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。
jsf – Ajax update/render在已渲染属性的组件上不起作用

我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。