JS中使用FormData上传文件、图片的方法

最新推荐文章于 2024-08-02 15:46:55 发布

lllo3o

最新推荐文章于 2024-08-02 15:46:55 发布

阅读量8.8k

点赞数 3

文章标签： FormData 上传文件

转自http://www.jb51.net/article/89998.htm

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

FormData

废话不多说，先上最后我用的完成版：

完整实例版：

HTML

<form id="fileform" enctype="multipart/form-data">
        <input type='file' name='file'/><br/>
        <input type='submit' value='submit'/>
    </form>

 /*上传文件*/
            document.querySelector("#fileform").addEventListener("submit", function(event) {
                var formdata=new FormData($("#fileform")[0]);
                $.ajax({
                    type : 'post',
                    url :host+'/file/uploadFileLocal?xxxxxxxxxxxxxx',//地址改为后台给的上传地址
                    data : formdata,
                    cache : false,
                    processData : false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
                    contentType :false, // 不设置Content-type请求头
                    success : function(res){
                        if((res.code==200) && (res.payload == "success"))
                            swal("","上传成功！","success")
                        else{
                            swal("","上传失败","error")
                        }
                    },
                    error : function(x){
                        swal("","连接服务器失败","error")
                        console.log('wrong:',x)
                    }
                })
                event.preventDefault();
            })

然后是查找的资料~

概念：关于FormData

XMLHttpRequest Level 2添加了一个新的接口 ---- FormData

利用FormData对象，可以通过js用一些键值对来模拟一系列表单控件，可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比，使用FormData的最大优点就是可以异步上传二进制文件

FormData对象

FormData对象，可以把所有表单元素的name与value组成一个queryString,提交到后台。在使用ajax提交时，使用FormData对象可以减少拼接queryString的工作量

queryString是查询字符串，http查询字符串由url中？后面的值指定

当页面上的form以GET方式向页面发送请求数据时 (如数据含有不安全字符，则浏览器先将其转换成16进制的字符再传送，如空格被转换成%20时 ) ,web server 将请求数据放入一名为QUERY_STRING的环境变量中。 Request.QueryString 方法是从这一环境变量中取出相应的值，并将被转成16进制的字符还原
使用FormData上传文件、图片

创建一个FormData空对象，然后使用append方法添加key/value

var formdata=new FormData();
 formdata.append ("name" , "张三");

如果已经有一个Form表单，取得form对象，作为参数传入FormData对象

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
</head>
<body>
  <form name="form1" id="form1">
    <input id="file" type="file" name="name"></input>
  </form>
  <script type="text/javascript">
     var form=document.getElementById("form1");
     var formdata=new FormData(form);
  </script>
</body>
</html>

可以在已有表单数据的基础上，继续添加新的键值对

var formdata=new FormData();var formdata=new FormData($("#form1").[0]);//获取文件法一
//var formdata=new FormData( ); 
//formdata.append("file" , $("#file")[0].files[0]);//获取文件法二
       $.ajax({
           type : 'post',
           url : '#',
           data : formdata,
           cache : false,
           processData : false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
           contentType : false, // 不设置Content-type请求头
           success : function(){}
           error : function(){ }
       })

 formdata.append ("age" , "21");

使用FormData对象上传文件

var formdata=new FormData($("#form1").[0]);//获取文件法一
//var formdata=new FormData( );
//formdata.append("file" , $("#file")[0].files[0]);//获取文件法二
$.ajax({
type : 'post',
url : '#',
data : formdata,
cache : false,
processData : false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
contentType : false, // 不设置Content-type请求头
success : function(){}
error : function(){ }
})

扩展：FileList

来自：https://developer.mozilla.org/zh-CN/docs/Web/API/FileList

一个FileList对象通常来自于一个HTML input元素的files属性,
你可以通过这个对象访问到用户所选择的文件.
该类型的对象还有可能来自用户的拖放操作.

例子：

这个例子迭代了用户通过一个input元素选择的多个文件:

// fileInput是一个 HTML input 元素: 
<input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");

// files 是一个 FileList 对象(类似于NodeList对象)
var files = fileInput.files;
var file;

//遍历所有文件
for (var i = 0; i < files.length; i++) {

    // 取得一个文件
    file = files.item(i);
    // 这样也行
    file = files[i];
    // 取得文件名
    alert(file.name);
}

更完整的例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
// multiple属性可以让用户能选择多个文件

<input id="myfiles" multiple type="file">

</body>

<script>

var pullfiles=function(){ 
    // 获取到input元素
    var fileInput = document.querySelector("#myfiles");
    var files = fileInput.files;
    // 获取到所选文件数量 
    var fl=files.length;
    var i=0;

    while ( i < fl) {
        var file = files[i];
        alert(file.name);
        i++;
    }    
}

// 设置change事件处理函数
document.querySelector("#myfiles").οnchange=pullfiles;

</script>

</html>

lllo3o

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
JS中使用FormData上传文件、图片的方法

转自http://www.jb51.net/article/89998.htm参考：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_ObjectsFormData废话不多说，先上最后我用的完成版：完整实例版：HTML
复制链接

扫一扫