HTML5 FormData+Ajax上传文件表单

文件表单的数据类事multipart/form-data，因此，formData需要特殊处理.

文件上传

参考文章：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CAS SSO</title>
		
	</head>
	<body>
		<div class="box">
            <div>
                <div class="item">
                    <input type="file" name="myfile" style="font-size: 0.7rem;">
                </div>
                <div class="item">
                    <button type="button" style="display: block; padding: 4px 18px;" class="btn-default">ajax提交</button>
                </div>
                <div class="item">
                    <button type="submit" style="display: block; padding: 4px 18px;" class="btn-default">form提交</button>
                </div>
            </div>
            <div class="prompt" style="font-size: 0.7rem;"></div>
        </div>
    
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
			
$(function($) {
    $('input[name=myfile]').on('change', function(e) {
        $('button[type=button]').on('click', function(e) {
            var formData = new FormData();
            // formData.ppend(name, element);
            
            //创建图片文件
            formData.append('myfile', $('input[name=myfile]')[0].files[0]); 
            //如果第二个参数没有名称，那么取第三个默认参数blob为file的名称,当然你也可以设置第三个参数名称

            //创建文本文件
            var blob = new Blob(['helloworld,i am zhangsan '], {type:'text/plain'});
            formData.append('text', blob,"my.txt"); //第三个参数默认事字符串"blob",表示filename

              //创建文本文件
            var text = new File(['test '],"my2.txt", {type:'text/plain'});
            formData.append('text2', blob,"my2.txt"); //第三个参数默认事字符串"blob",表示filename

            //创建普通字符串
            formData.append('name', "zhangsan");

            $.ajax({
                url: 'http://localhost/test/upload/upload.php',
                method: 'POST',
                data: formData,
                contentType: false, // 注意这里应设为false
                processData: false,
                cache: false,
                success: function(data) {
                   	console.dir(arguments);
                },
                error: function (jqXHR) {
                    console.log(JSON.stringify(jqXHR));
                }
            })
            .done(function(data) {
                console.log('done');
            })
            .fail(function(data) {
                console.log('fail');
            })
            .always(function(data) {
                console.log('always');
            });
        });
    });
});

		</script>
	</body>
</html>

服务器代码

<?php
// var_dump($_REQUEST); // 为空数组
// var_dump($_FILES); //不为空
// 


// 当使用FormData配合ajax上传文件时，$_REQUEST、$_POST都是空数组，php://input也是null
if (isset($_FILES['myfile']) && !empty($_FILES['myfile'])) {
    if (move_uploaded_file($_FILES['myfile']['tmp_name'], $_FILES['myfile']['name'])) {
        echo '{"result": 1, "filename": "' . $_FILES['myfile']['name'] . '"}';

        var_dump($_FILES);
        
    } else {
        echo '{"result": 0}';
    }
}else{

	echo '{"result": -1}';
}

?>

以上代码测试，通过调试工具我们可以看到相应的数据流

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9
Connection:keep-alive
Content-Length:131153
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryChuwaU5KHylRXSsn
Cookie:optimizelyEndUserId=oeu1507982138063r0.6497501844178946; _ga=GA1.1.126133204.1488159599
Host:localhost
Origin:http://localhost
Referer:http://localhost/test/upload/cas.html
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.62 Safari/537.36
X-Requested-With:XMLHttpRequest


------WebKitFormBoundaryChuwaU5KHylRXSsn
Content-Disposition: form-data; name="myfile"; filename="2010210171141749.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryChuwaU5KHylRXSsn
Content-Disposition: form-data; name="text"; filename="my.txt"
Content-Type: text/plain


------WebKitFormBoundaryChuwaU5KHylRXSsn
Content-Disposition: form-data; name="text2"; filename="my2.txt"
Content-Type: text/plain


------WebKitFormBoundaryChuwaU5KHylRXSsn
Content-Disposition: form-data; name="name"

zhangsan
------WebKitFormBoundaryChuwaU5KHylRXSsn--

关于File对象

File对象实际上继承自Blob对象，对于文件上传，我们既可以使用Blob也可以使用File对象

var f = new File(["你好，世界"],"my.txt",{'type': 'text/plain'});
var blob = new Blob(['helloworld,i am zhangsan '], {type:'text/plain'});

第一个参数是文件片段数组，可以传二进制数据流，对于使用Canvas图片裁剪，我们可以利用Blob和File构建文件。

来源：oschina

链接：https://my.oschina.net/u/2256215/blog/1558576

标签

ajax

html5

formdata

formdata上传文件

html表单