背景

UI如圖所示，其中有一個拍照圖標，點擊后要選擇拍照或者從相冊中選擇要上傳的圖片。

拍照上傳部分的代碼如下

html部分

<div class="take-photo"><img src="./images/take-photo.png" class="take-phote-picture"><input type="file" name="file" accept="images/*" class="select-picture"> </div>

css部分

.take-phote-picture{margin: 10px 20px;width: 100px; }.select-picture{opacity: 0;position: absolute;width: 100px;height: 100px;top: 10px;left: 70px;border-radius: 50px; }

設計思路

將一個input[type="file"]的透明度設置為0，懸浮在img標簽之上。通過給input標簽綁定change事件，獲取上傳的文件，異步上傳。

問題

通過ajax的data屬性提交到后臺的數據必須是鍵值對（key-value）的形式，其中值value不能為二進制數據。而通過input的files屬性獲取的上傳文件被格式化為二進制形式。

解決方案

define([], function () {/*** 跨域異步post提交工具 使用Formdata,非iframe 提交*/var ifajax = function(_url){var data = new FormData();var obj ={};obj.appendInput = function (input_obj) {if (input_obj.files) {for (var i = 0; i < input_obj.files.length; i++) {data.append(input_obj.name, input_obj.files[i]);}} else {data.append(input_obj.name, input_obj.value);}return this;};obj.submit = function (success,err) {var xhr = new XMLHttpRequest();var url = _url||"/club/apiv1/me/b64-upload";xhr.open("POST", url, true);xhr.setRequestHeader('Accept', '*/*');xhr.onload = function () {if (xhr.status == 200) {if (xhr.responseText) {try {//console.log(xhr);var json = $.parseJSON($.trim(xhr.responseText));success && success(json);} catch (e) {err && err("parse error", xhr.responseText);}}} else {var message = xhr.responseText, code = xhr.status;if (code === 413) {message = "上傳文件大小超過限制"} else {try {var json = $.parseJSON(xhr.responseText);message = json.message;code = json.code;} catch (e) {}}err && err (code, message);}};xhr.send(data);return;}return obj;};return ifajax; });

此外，還可以借助插件ajaxFileUpload實現異步上傳文件

總結

以上是生活随笔為你收集整理的input[type=file] 异步上传文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。