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

其他 2018-06-21 12:14:23 阅读次数: 3

前言

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

猜你喜欢

转载自blog.csdn.net/qq_39198420/article/details/79062085
今日推荐
技术解析 GPT-4o：即时语音交互的突破与 GenAI 发展策略
开源大模型与闭源大模型
微信小程序授权登录获取用户的openid
亿级流量系统架构设计与实战
人工智能时代的程序设计教学与课程设计
纽交所技术问题致伯克希尔 (BRK.A) 显示跌近 100%
探索 api.maynor1024.live：一站式 AI 服务平台
AI一键去衣技术：窥见深度学习在图像处理领域的革命(最后有彩蛋)
艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序
Apple M1 vs 高通8Gen2 vs Apple A12Z各方面比较
【升职加薪必备架构图】Springboot学习路线汇总_springboot四层架构流程图
与Apollo共创生态：Apollo7周年大会自动驾驶生态利剑出鞘
周排行
事务隔离级及脏读、幻读和不可重复读
rtos：zephyr同步信号量
把对象转换为JSON格式的数据
iOS Dev (56) iTunes Store 销售日报更新时间
Failed to start mongod.service: Unit not found;mongodb in unbuntu
Upgrading PHP on CentOS 6.5 (Final)
（四）王道机试指南___排版问题
TensorFlow之手写体识别
xcode xib报错 Safe Area Layout Guide Before IOS 9.0
【LeetCode】76. Minimum Window Substring（C++）
每日归档
更多
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)
2024-06-02(4)
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)
2024-05-29(65)
2024-05-28(2)
2024-05-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022