前台使用ajax与后台进行文件传输

在网上想搜如何用jQuery与控制表单与后台进行文件传输
大部分的回答都是直接用form表单提交
然而我想要的是使用ajax技术将文件传到后台,经过后台的处理后再返回信息到前台
然后发现网友建议使用jQuery表单框架,如AjaxUploadFile,Uploadify
在这里想和大家分享一下如何使用ajax技术向后台传送文件

FormData

这是HTML5的前沿技术
这里有一个非常全面的讲解
这里也有
这里还有
欢迎大家去看

简单地讲述一下它的使用:
实例化FormData对象

// 实例化一个空对象
var data = new FormData();
// 也可以在实例化的时候将数据加入
var data = new FormData(obj);
// 一般网FormData对象中添加数据使用append()方法
data.append(ojb)
// 将想要传送的数据都添加到data中后,我们需要建一个HTTP请求
var request = new XMLHttpRequest();
// 然后使用open方法,选择传送的method和后台的URL
request.open("POST|GET", "URL");
// 最后,向后台发送我们的数据
request.send(data)

如何获取表单中选中的文件

var fileObj = document.getElementById(inputId).files[i];
// 切记,不可使用如下方式
var fileObj = $("#inputId")[0]
// 此种方法获取到的是HTML DOM元素,而不是文件

如何使用jQuery向后台传送file文件

// 获取要传输的文件------假设只有一个文件
var file = document.getElementById(inputId).files[0];
// ajax传输
$.ajax({
    url: URL,
    type: "POST",  
    async: false,  
    cache: false, 
    processData: false,// 告诉jQuery不要去处理发送的数据
    contentType: false,// 告诉jQuery不要去设置Content-Type请求头
    data: file,
    success: function(data){
        alert(data);
    },
    error: function(err) {
        alert(err);
    }
});

你可能感兴趣的:(JavaScript)