圖像上傳文件選擇不在提交表單上，

Question

我有一個HTML表單，用戶可以在輸入字段中上傳圖像，並且工作正常，但圖像在提交表單時上傳。

有沒有一種方法可以在選擇文件並且用戶仍在填寫表單時將圖像上傳到TMP目錄，然後當用戶提交表單時可以將其移動到實際的文件目錄。這將會帶來更好的用戶體驗，尤其是那些互聯網連接速度慢的人可以從中受益，因爲它可以有效利用用戶的時間。

我不確定，但我認爲這需要某種jQuery/Ajax解決方案來上傳圖像中間表單條目，然後使用PHP將文件從TMP傳輸到實際目錄。

Answer 1

正如Diodeus建議的那樣，將表單放在iframe中可以防止它在當前頁框中發佈，並允許用戶使用其他表單項。更多你所期望的解決方案將使用AJAX請求。您可以查看HTML5 API，有許多不同的已經構建的解決方案和許多教程。

下面是this demo at html5demos.com

<title>Drag and drop, automatic upload</title> 
<style> 
#holder { border: 10px dashed #ccc; width: 300px; min-height: 300px; margin: 20px auto;} 
#holder.hover { border: 10px dashed #0c0; } 
#holder img { display: block; margin: 10px auto; } 
#holder p { margin: 10px; font-size: 14px; } 
progress { width: 100%; } 
progress:after { content: '%'; } 
.fail { background: #c00; padding: 2px; color: #fff; } 
.hidden { display: none !important;} 
</style> 
<article> 
    <div id="holder"> 
    </div> 
    <p id="upload" class="hidden"><label>Drag &amp; drop not supported, but you can still upload via this input field:<br><input type="file"></label></p> 
    <p id="filereader">File API &amp; FileReader API not supported</p> 
    <p id="formdata">XHR2's FormData is not supported</p> 
    <p id="progress">XHR2's upload progress isn't supported</p> 
    <p>Upload progress: <progress id="uploadprogress" min="0" max="100" value="0">0</progress></p> 
    <p>Drag an image from your desktop on to the drop zone above to see the browser both render the preview, but also upload automatically to this server.</p> 
</article> 
<script> 
var holder = document.getElementById('holder'), 
     tests = { 
      filereader: typeof FileReader != 'undefined', 
      dnd: 'draggable' in document.createElement('span'), 
      formdata: !!window.FormData, 
      progress: "upload" in new XMLHttpRequest 
     }, 
     support = { 
      filereader: document.getElementById('filereader'), 
      formdata: document.getElementById('formdata'), 
      progress: document.getElementById('progress') 
     }, 
     acceptedTypes = { 
      'image/png': true, 
      'image/jpeg': true, 
      'image/gif': true 
     }, 
     progress = document.getElementById('uploadprogress'), 
     fileupload = document.getElementById('upload'); 

"filereader formdata progress".split(' ').forEach(function (api) { 
    if (tests[api] === false) { 
     support[api].className = 'fail'; 
    } else { 
     // FFS. I could have done el.hidden = true, but IE doesn't support 
     // hidden, so I tried to create a polyfill that would extend the 
     // Element.prototype, but then IE10 doesn't even give me access 
     // to the Element object. Brilliant. 
     support[api].className = 'hidden'; 
    } 
}); 

function previewfile(file) { 
    if (tests.filereader === true && acceptedTypes[file.type] === true) { 
     var reader = new FileReader(); 
     reader.onload = function (event) { 
      var image = new Image(); 
      image.src = event.target.result; 
      image.width = 250; // a fake resize 
      holder.appendChild(image); 
     }; 

     reader.readAsDataURL(file); 
    } else { 
     holder.innerHTML += '<p>Uploaded ' + file.name + ' ' + (file.size ? (file.size/1024|0) + 'K' : ''); 
     console.log(file); 
    } 
} 

function readfiles(files) { 
     debugger; 
     var formData = tests.formdata ? new FormData() : null; 
     for (var i = 0; i < files.length; i++) { 
      if (tests.formdata) formData.append('file', files[i]); 
      previewfile(files[i]); 
     } 

     // now post a new XHR request 
     if (tests.formdata) { 
      var xhr = new XMLHttpRequest(); 
      xhr.open('POST', '/devnull.php'); 
      xhr.onload = function() { 
       progress.value = progress.innerHTML = 100; 
      }; 

      if (tests.progress) { 
       xhr.upload.onprogress = function (event) { 
        if (event.lengthComputable) { 
         var complete = (event.loaded/event.total * 100 | 0); 
         progress.value = progress.innerHTML = complete; 
        } 
       } 
      } 

      xhr.send(formData); 
     } 
} 

if (tests.dnd) { 
    holder.ondragover = function() { this.className = 'hover'; return false; }; 
    holder.ondragend = function() { this.className = ''; return false; }; 
    holder.ondrop = function (e) { 
     this.className = ''; 
     e.preventDefault(); 
     readfiles(e.dataTransfer.files); 
    } 
} else { 
    fileupload.className = 'hidden'; 
    fileupload.querySelector('input').onchange = function() { 
     readfiles(this.files); 
    }; 
} 

</script> 

採取一個簡單的例子，這將創建一個區來刪除文件（而不是瀏覽按鈕），並啓動文件上傳時拖放事件發生。它將異步執行，並允許頁面內容與正常情況下交互，而傳輸則在後臺進行。然而，在這個例子中有一個重要的改變。這條線：

xhr.open('POST', '/devnull.php'); 

應改爲一個代碼文件在您的環境/服務器但是你需要將處理文件上傳數據並保存或處理文件。該腳本僅作爲該腳本的前端。另外要記住的是HTML5 File API is still a modern-browser-only type of thing; it's well supported in current browsers, but older ones are out of luck。如果你需要支持他們，你應該尋找另一種解決方案。