jquery ajax 上传文件处理

Snailclimb 发布于2019-08-19 18:39 / 3222人阅读

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

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");
        }  
    });

GPU云服务器云服务器 ajax上传文件 ajax文件上传 ajax实现文件上传 Ajax文件上传库

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

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

HTML5+Ajax上传文件

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

qieangel2013 2019-08-19 17:45 评论0 收藏0
ajax上传文件的请求

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

Cobub 2019-08-21 18:25 评论0 收藏0
文件上传进度提示

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

MageekChiu 2019-08-20 15:17 评论0 收藏0
在Laravel项目中实现Ajax上传用户头像

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

shiina 2019-06-27 11:20 评论0 收藏0