首页 > 代码库 > jquery.attach附件上传jquery插件

jquery.attach附件上传jquery插件

2024-08-29 09:41:24   217人阅读

html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    ......
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="attach/jquery.attach.js"></script>
    <script type="text/javascript" src="attach/index.js"></script>
    ......
    <script type="text/javascript">
      $(function(){
        initFileInput(‘fileuri‘,‘yulanimg‘);
      });
    </script>
</head>
<body>
      <div>
        <div>
          <input id="inputupload" class="am-form-field am-input-sm" type="file" style="padding-top: 10px;padding-bottom: 10px;"/>
          <span id="continuefile">
          </span>
        </div>
        <div id="yulanimg"></div>
        <span style="display:none;" id="fileuri"></span>
      </div>
</body>
</html>

 

index.js

//初始化fileinput控件
function initFileInput(fileuri,yulanimg) {
    $(":input[type=‘file‘]").attachsvr({
      script: urlcore + "/file/upload/batch",
      uploadkey:"files",
      filetype:[".jpg",".png",".jpeg",".bmp"],

      onComplete:function(json){
           var data =http://www.mamicode.com/ JSON.parse(json.data);
        if (data.success == true) {
            //$("#"+divUploadWrap).css("background-image","");
            //$("#"+fileuri).text(‘‘);
            //i表示在data中的索引位置，n表示包含的信息的对象
            //$("#"+yulanimg).html(‘‘);
            var filespanval = $("#"+fileuri).text();
            $.each(data.data,function(i,n){
                $("#"+yulanimg).append(‘<img id="fileimgid" style="width: 250px;height: 250px;padding-left: 5px;padding-bottom: 5px;" src="http://www.mamicode.com/‘+n+‘">‘);
                if (filespanval != undefined && filespanval != null && filespanval != ‘‘) {
                    $("#"+fileuri).text(filespanval+"|||"+n);
                }else{
                    $("#"+fileuri).text(n);
                }
            });
        }else{
            alert("上传失败");
        }

      },
      onProgress:function(xhr){
          //console.log(xhr);
          //console.log("progress,在这里可以添加loading 效果",parseInt(xhr.loaded/xhr.total*100)+"%")
          $(‘#continuefile‘).text(parseInt(xhr.loaded/xhr.total*100)+"%");
      },
      onCheck:function(file){
        console.log(file);
        return true;
      },
      one rror:function(e){console.log("error",e)},
      ctxdata:{
        "参数1":"参数1的值",
        "参数2":"参数2",
      }

    });
}

 

 

jquery.attach.js

/*
*@author 271151388@qq.com
*个人主页 http://www.imwinlion.com/
*专门为技术人员创业提供从工具到思维层面的支持的网站
*基本使用 https://my.oschina.net/u/2558718/blog/743780
*/
!~(function(w,d,$){
    var _attachsvr={};
    var defaultoptions={
            debug:false,
            onCheck:function(file){return true;},
            onComplete:function(json){},
            one rror:function(r){},
            onProgress:function(xhr){},
            ctxdata:{},
            script:"",
            uploadkey:"files",
            filetype:[".jpg",".png",".jpeg",".zip",".mp3",".mp4"]
    }
    _attachsvr.doupload=function(file,optios){
         var options = $.extend(defaultoptions,optios);
         var data = http://www.mamicode.com/new FormData();
             for(var i in options.ctxdata){
                 data.append(i,options.ctxdata[i]);
             }
            data.append(options["uploadkey"], file[0].files[0]);
            var surport = false;
            var filename =   file[0].files[0].name;
            for(var i in options.filetype){
                
                if(filename.indexOf(options.filetype[i])>-1){
                    surport = true;
                }
            }
            if(surport==false){
                options.onError({"result":"notsurport","msg":"这个文件类型不支持","data":{}})
                return false;
            }
            if(!options.onCheck(file)){
                return false;
            }
            $.ajax({
                url: options.script,
                type: ‘POST‘,
                data: data,
                xhr: function() {
                 var xhr = $.ajaxSettings.xhr();
                 xhr.upload.addEventListener(‘progress‘, function(xhr){
                     options.onProgress(xhr);
                 }, false);
                 return xhr;//一定要返回，不然jQ没有XHR对象用了
                },
                processData: false,
                contentType: false,
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    options.onError(
                        {
                            "result":"errornet",
                            "msg":"网络通讯错误",
                            "data":{"XMLHttpRequest":XMLHttpRequest,"textStatus":textStatus,"errorThrown":errorThrown}
                        }
                    );
                }
            }).done(function(ret){
                options.onComplete({"result":"success","msg":"文件已经上传成功","data":ret});
            });
    };
    w.attachsvr = _attachsvr;
     $.fn.extend({
            //插件名称 - paddingList
                 attachsvr: function (options) {
                var defaults = defaultoptions;
                var options = $.extend(defaults, options);
                return this.each(function () {
                    var o = options;
                    var obj = $(this);
                $(this).unbind().change(function(){
                    _attachsvr.doupload(obj,o);});
               });
                
            }
        });
})(window,document,jQuery)

 

注： 如果上传之后的预览图需要调整大小和只允许上传一张图片，可以如下设置：

    
    initFileInput(‘fileuri‘,‘yulanimg‘);
    var wait = setInterval(function(){
        var fileimgid = $("#fileimgid")[0];
        //判断select option是否为空
        if (fileimgid != 0 && fileimgid != null && fileimgid != undefined && fileimgid != ‘‘) {
            clearInterval(wait);
            //自定义图片上传预览的大小
            $("#fileimgid").css("width","30px");
            $("#fileimgid").css("height","30px");
            $("#fileimgid").css("padding-left","");
            $("#fileimgid").css("padding-bottom","");
        }
    },100);

    var wait1 = setInterval(function(){
        var fileimgid = $("#yulanimg").html();
        //判断select option是否为空
        if (fileimgid != 0 && fileimgid != null && fileimgid != undefined && fileimgid != ‘‘) {
            clearInterval(wait1);
            $("#inputupload").attr("disabled",true);
        }
    },100);

 

jquery.attach附件上传jquery插件


联系
我们