资讯专栏INFORMATION COLUMN

jquery ajax 上传文件处理

Snailclimb / 3231人阅读

摘要:之前都是用原生的写的请求方式其实的也可以支持到的,关键是设置和。方式告诉不要去处理发送的数据告诉不要去设置请求头正在进行,请稍候成功失败

FormData对象

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
之前都是用原生js的XMLHttpRequest写的请求

XMLHttpRequest方式
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // Handle response.
        alert(xhr.responseText); // handle response.
    }
};
fd.append("myFile", file);
// Initiate a multipart/form-data upload
xhr.send(fd);

其实jquery的ajax也可以支持到的,关键是设置:processData 和 contentType 。

ajax方式
var formData = new FormData();
var name = $("input").val();
formData.append("file",$("#upload")[0].files[0]);
formData.append("name",name);
$.ajax({  
        url : Url,  
        type : "POST",  
        data : formData,  
        // 告诉jQuery不要去处理发送的数据
        processData : false, 
        // 告诉jQuery不要去设置Content-Type请求头
        contentType : false,
        beforeSend:function(){
               console.log("正在进行,请稍候");
                },
        success : function(responseStr) { 
            if(responseStr.status===0){
                console.log("成功"+responseStr);
            }else{
                console.log("失败");
            }
        },  
        error : function(responseStr) { 
            console.log("error");
        }  
    }); 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79823.html

相关文章

  • HTML5+Ajax上传文件

    摘要:比起普通的,使用的最大优点就是我们可以异步上传一个二进制文件。方法二一次性上传多个文件如果后台接口要求单个文件,就循环获取文件信息提交,使用同步上传。 欢迎交换友链 Lakers Blog--进击的程序媛Github:https://github.com/younglaker微博: 江小湖Laker showImg(https://segmentfault.com/img/bVtcT...

    qieangel2013 评论0 收藏0
  • ajax上传文件的请求

    摘要:是发送的必须是类型注意把设为,让不要对做处理,如果不设置为,会把转换为字符串。查看文件上传的请求头里,参数为请求参数之间的界限标识。也就是说防止覆盖掉的。 1、data是FormData 发送的data必须是FormData类型 2、注意processData 把processData设为false,让jquery不要对formData做处理,如果processData不设置为fals...

    Cobub 评论0 收藏0
  • 文件上传进度提示

    摘要:需求当上传的文件相对较大时,用户可能需要等待较长的时间,这个时候前端如果没有任何提示的话,体验不是很好,如果有上传进度提示,就会好很多。 需求 当上传的文件相对较大时,用户可能需要等待较长的时间,这个时候前端如果没有任何提示的话,体验不是很好,如果有上传进度提示,就会好很多。而要在上传过程实时显示上传进度,则需要已上传的大小和文件总大小。 前提 请求是异步的。因为要实时获取到上传的进度...

    MageekChiu 评论0 收藏0
  • 在Laravel项目中实现Ajax上传用户头像

    摘要:在编写程序的过程中,经常会遇到一个经典的文件上传场景上传头像图片。基于对最好的用户体验的追求,写一下之前在项目中实现在项目中的上传头像。 在编写web程序的过程中,经常会遇到一个经典的文件上传场景:上传头像(图片)。基于对最好的用户体验的追求,写一下之前在项目中实现在Laravel项目中的Ajax上传头像。 1.配置路由 在Laravel的routes.php中设置路由: Rou...

    shiina 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<