html 中 file 類型的 input 輸入框,可以將本地的文件上傳到網站的服務器,但它的上傳需要 form 表單提交觸發的。而今天我們要說一說,file 類型的輸入框在選擇本地文件后,自動上傳的方法。

input file選擇文件后自動上傳

可以使用js代碼中的FormData對象,利用 change 觸發上傳,

FormData對象:此對象用以將數據編譯成鍵值對,以便用XMLHttpRequest來發送數據。其主要用于發送表單數據,但亦可用于發送帶鍵數據(keyed data),而獨立于表單使用。如果表單enctype屬性設為multipart/form-data ,則會使用表單的submit()方法來發送數據,從而,發送數據具有同樣形式。

代碼如下:

html代碼

<input type="file"  id="upLoad" >

jq代碼

$('body').on('change','#upLoad',function(){
    var formData = new FormData();
    var name = $($(this)).val();
    var files = $($(this))[0].files[0];
    formData.append("file", files);
    formData.append("name", name);
    //另外加的參數
    formData.append("act", "PostImg"); 
    var index = layer.msg('正在提交中....');
    $.ajax({
        url: 'img.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false, 
        dataType: 'json',
        success:function (res) {
            alert('上傳成功');
        }
        ,error:function (res) {
            alert('錯誤');
        }
    });
})