ajax 和 ajaxFileUpload

语法:$.ajaxFileUpload([options])

   options参数说明:

参数描述
url上传处理程序地址
fileElementId需要上传的文件域的ID,即 < input type=”file” id=”” /> 的ID
secureuri是否启用安全提交,默认为false
dataType服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断
success提交成功后自动执行的处理函数,参数data就是服务器返回的数据
error提交失败自动执行的处理函数
data自定义参数。这个东西比较有用,当有数据是与上传的文件相关的时候,这个东西就要用到了
type当要提交自定义参数时,这个参数要设置成post

错误提示:

1,SyntaxError: missing ; before statement错误
  如果出现这个错误就需要检查url路径是否可以访问

2,SyntaxError: syntax error错误
  如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误

3,SyntaxError: invalid property id错误
  如果出现这个错误就需要检查文本域属性ID是否存在

4,SyntaxError: missing } in XML expression错误
  如果出现这个错误就需要检查文件name是否一致或不存在

5,其它自定义错误
  大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多

ajaxFileupload多文件上传

ajaxFileupload这个插件用于上传文件,不过它默认是只能上传一个文件。通过修改其源代码,可以方便地实现多个文件上传。
ajaxFileupload的原理挺简单的,它将用户指定(通过ID)的file input添加到form里面,然后将form提交。我们只需要将多个file input的ID通过一个列表传给ajaxFileupload,让它将多个file input添加到form里面就可以了。
打开ajaxfileupload.js,修改如下的地方:

// 实现多文件上传
if (typeof(fileElementId) == 'string') {
    fileElementId = [fileElementId];
    }
for (var i in fileElementId) {
    // 下面是原来的代码
    var oldElement = jQuery('#'   fileElementId[i]);
    var newElement = jQuery(oldElement).clone();
    jQuery(oldElement).attr('id', fileId);
    jQuery(oldElement).before(newElement);
    jQuery(oldElement).appendTo(form);
 }

使用的时候:

$.ajaxFileUpload({
        url: "/xxx/xxx/xxx",
        secureuri: false,
        fileElementId: [file1,file2,file3,...],// 这个地方变成数组了
        dataType: 'json',
        data:{
            name: 'files'
        },
        success: function(data, status){
        },
        error: function(XMLHttpRequest)
        {
})

一个input上传多个文件

//上传文件的input
<input id="sharerUpload0" name="files" type="file" multiple="multiple"  />
//展示上传文件名
<ul id='content'></ul>
//在上传页面展示上传文件
var input = document.getElementById('sharerUpload0');           
input.addEventListener('change',readFile, false);
var str = "";

function readFile() {
var listFiles = this.files;
console.log(listFiles);     

for (var i = 0, len = listFiles.length; i < len; i++) {                                 
 //在上传页面展示所有上传文件名
 str += '<li>名称:' + listFiles[i].name;                                                                                  
};              
//上传页面展示所有上传文件名
document.getElementById('content').innerHTML = str;                         
} 

function ShareFileUpload() {    
             $.ajaxFileUpload({                
             url : webBasePath + 'sharerupload/upload',//用于文件上传的服务器端请求地址
             type : "post",
             data : params,
             dataType : "json",
             timeout : 30000,
             secureuri : false,// 一般设置为false
             fileElementId : "sharerUpload", //后台要用list接收获取的文件名
             success : function(data) { 
                 //返回的是一个字符串
    //           alert(JSON.parse(data).msg);
    //       console.log("data" +JSON.stringify(data));

             console.log(webBasePath + 'sharerupload/upload');
             $('#dataList').datagrid('reload');                        
             closeIdDialog("share_add");
             showMsg(JSON.parse(data).msg);                     
             },
             error : function(data) {
             $('#dataList').datagrid('reload');
             showMsg("上传失败,请重新上传!!!");
             }

             });

         }  

二.ajax

jQuery.post(
    url,
    data,
    success(data, textStatus, jqXHR),
    dataType
    )
参数是否必选描述
url必需规定把请求发送到哪个 URL
data可选映射或字符串值。规定连同请求发送到服务器的数据
success(data, textStatus, jqXHR)可选请求成功时执行的回调函数
dataType可选规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)

该函数是简写的 Ajax 函数,等价于:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

带加载中的layer的弹窗

$.ajax({
        url : webBasePath+'prj/program/startFGSWorkFlow',
            type : "POST",
            data : jobcontentData,
            beforeSend: function (request) {
                indexLoad = layer.load();
            },
            success : function(data){                   
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                layer.load(indexLoad);
                layer.msg("数据加载成功!", {time : 1500, icon : 6});
                setTimeout(function(){parent.layer.close(index)},1500)//再执行关闭                   
            },
            error : function(){
                layer.msg("保存失败,请联系开发人员!", {time : 1500, icon : 5});
            }               
        })  
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajaxfileupload.js可以兼容IE8以下版本实现无刷新的Form提交,上传文件。 这个版本修改了提交后台失败的几个bug 使用是需注意以下几点: 1.调用createUploadForm,此方法中增加了change参数,此参数用户给新生成的input-file元素绑定change事件,如果不需要可以不加此参数。 2.要上传的input-file元素,建议放id和name属性,而且这两个属性值要保持一致 3.后台代码中,response里的contenttype要设置为"text/html",前台的success回调中对返回值作处理 例子如下: js: $.ajaxFileUpload({ url: url, type: 'post', data: data, secureuri: false, fileElementId: fileId, // input-file的id、name属性名 dataType: 'JSON', beforeSend: function (XMLHttpRequest) { //show loading... }, success: function (data, status) { data = jQuery.parseJSON(data); success(data); }, error: function (data, status, e) { error(e); }, complete: function (XMLHttpRequest, textStatus) { //hide loading... }, change: change //需要绑定到动态生成的input-file元素上的change事件处理方法;没有的话,这个参数可以不写 }); 如果加了change,change方法中需要处理一下,因为发现会被调2次 function Upload(event) { var fileid = $(event.target).attr('id'); if(isNullOrEmpty(fileid) || /^jUploadFile\d+$/.test(fileid))return; //注意:此处过滤无效调用 //... } 后台代码(ashx): public void ProcessRequest(HttpContext context) { try { context.Response.ContentType = "text/html"; var request = context.Request; var param1 = request.Params["param1"]; //取参数 //取上传文件 if (request.Files == null || request.Files.Count <= 0) throw new ApplicationException("no file to be uploaded!"); var file = request.Files[0]; var filename = System.IO.Path.GetFileName(file.FileName); var serverpath = Path.Combine(context.Server.MapPath(ROOT), filename); file.SaveAs(serverpath); //自定义返回Json字符串 var json = '{' + string.Format(json, id, finfo.Name, extension, path) + '}'; response.Write(json); return; }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值