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

前言

刚开始使用的是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表单文件上传。

原文链接：https://www.f2er.com/ajax/160473.html

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

前言

fileupload（jQuery File Upload）

上传后预览插件imgUp

猜你在找的Ajax相关文章