HTML5 FormData+Ajax上傳文件表單

時間 2019-11-06

標籤 html5 html formdata+ajax formdata ajax 上傳文件表單欄目 HTML5 简体版

原文原文鏈接

文件表單的數據類事multipart/form-data，所以，formData須要特殊處理.php

文件上傳

參考文章：html

HTML5 + AJAX ( 原生JavaScript ) 異步多文件上傳jquery

[HTML5] Blob對象ajax

經過Ajax方式上傳文件，使用FormData進行Ajax請求數組

FormData 對象的使用服務器

FormData.append()app

<!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構建文件。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。