jquery异步上传文件

最近在学习js,进而接触到jquery. 中间碰到有一个异步上传文件的问题.

我们上传文件是要通过表单的. 也就是form或者最新的一个对象 FormData对象.因为js客户端是无法读取文件的.所以也就不能读到文件的数据,也就不能发送了. 所以我们一定要通过表单or FormData对象.

现在有一个问题,如果你现在有一个表单, 表单之中有一个上传文件的<input>,你想异步上传这个文件, 该怎么办?

如果,你直接递交, 会把整个表单一起递交上去. 这种情况下,我们可以利用FormData对象,把这个文件放到FormData对象里,然后递交到服务器上就行了.

<span style="font-size:24px;">//获取文件</span>

var file_object = $("#file_id").get(0).files[0];

//创建FormData对象, 并将文件对象加入到该对象之中.以便想表单一样递交到服务器.

data = new FormData();
data.append("file", file_object);//这里的"file"取决于你的服务器端是怎么定义的.即根据什么名字来读取文件字符串.

//异步上传

$.ajax({
        type: "POST",
        url: "#",
        data: data,
        processData: false,
        contentType: false,
        cache: false,
        success: function(result) {//result是服务器端返回.
          if(result){
           }
          }else{
            bootbox.alert({
              message:"上传失败",
              className:"bootbox-sm"
            });
          }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            
        }
    });

这样便实现了异步上传文件了.