共享js无刷新上传jquery插件

根据项目需要写了一个单文件无刷新上传功能,供大家参考:

/*
 * 作者:gaobin
 * 
 * 邮箱:31705252@qq.com
 * 
 * 日期:2017-10-20
 * 
 * 编写目的:
 * 项目中之前使用是ajax-upload.js,版本是Version 3.5 (23.06.2009),
 * 官网主页是http://valums.com/ajax-upload,不过现在已经不更新了,
 * 为了减少体积方便在移动端应用,且不能改变原项目源码的情况下重新开发类似插件 
 * 
 * 开放目的:供大家参考!

使用示例:
    <script>
        new AjaxUpload("upload", {
            action: "/area/public/uploadImg/",
            name: 'AttachmentFile',
            accept: "image/*",
            onSubmit: function (file, ext) {
                if (!(ext && /^(jpg|png|jpeg|gif)$/i.test(ext))) {
                    alert("只支持 JPG, PNG和 GIF 格式的图片");
                    return false;
                }
                //alert_status.text("上传中...");
            },
            data: {
                //"path": "/app_Content/upload/Corporation/",
                "__RequestVerificationToken": $("input[name=__RequestVerificationToken]").val(),
            },
            getData:function(){
              return {};
            },
            onComplete: function (file, res) {
                //alert_status.html("");
                if (res.state) {
                    $("#LOGO").val(res.path);
                    $("#logo_img").attr("src", res.path);
                    // $("#GRZPFM").css("display", "block").attr("src", res.path + "?" + (new Date).getSeconds());
                } else {
                    alert(res.msg);
                }
            }
        });
    </script>
/*

/*=====================以下是上传功能的代码封装=====================*/
+(function ($, w, d, undefined){
    w.AjaxUpload = function (o, options) {

       var _default = {
           action: '/subject/upload',
            name: 'AttachmentFile',
            accept: 'image/*', 
            data: {},
            responseType: "json",
            ifrmame: "uplFrame",
            getData:function(){},
            onChange: function (file, extension) {  },
            onSubmit: function (file, extension) { return true; },
            onComplete: function (file, response) { }
        };
       this._settings = $.extend({}, _default, options);
       
       this._settings.btn = o;

        init(this._settings);
    };

   var init = function (paras) {


       var _frame = $("<iframe>", {
           "id": paras.ifrmame,
           "style": "display:none"
       });

       _frame.on("load", function (event) {
          
           //获取上传的值 // this.contentWindow.document.body.innerHTML;//innerText
           var jsonstr = _frame.contents().find("body").html();
        
           if ($.trim(jsonstr) === "") {
               //这是初始加载
           } else {
               paras.complete($.parseJSON(jsonstr));
           }
           //重置iframe
           fillIframe(_frame, paras);
           event.stopPropagation();
          // throw { "e": "test" };
       }).appendTo("body");
       
       //
       $("#" + paras.btn).bind("click", function () {
           //触发上传
           _frame.contents().find("#" + paras.name).click();
       });
       return _frame;
   };

   var  fillIframe= function (o,paras) {//填充IFRAME       Func
       var _iframe = $(o).contents();
       _iframe.find("body").html("").append($("<form>", {
           "method": "post",
           "id": "form_id",
           "action": paras.action,//上传路径
           "enctype": "multipart/form-data"
       }).append($("<input>", {
           "id": paras.name,
           "type": "file",
           "name": paras.name,//上传文件的名称,需要与action参数的名称一致
           change: function () {
               //文件框变更时
               paras.onChange(this, getExt(this.value));
               //提交表单前
               var _checkResult = paras.onSubmit(this, getExt(this.value));
               if ( _checkResult==false) {
                   return false;
               }
               var form = _iframe.find("#form_id");
               var jsondata = paras.getData();// Func();
               jsondata = $.extend(jsondata, paras.data);
               for (var key in jsondata) {
                   $("<input>", {
                       "type": "hidden",
                       "value": jsondata[key],
                       "name": key
                   }).appendTo(form);
               }
               form.submit();
           }
       })));
   };
    
   var getExt= function (file){
       return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
   };
    w.AjaxUpload = AjaxUpload;
})(jQuery, window, document);


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值