----------------------- FormData | ----------------------- # html5ж«Î÷ # ¿ÉÒÔʵÏÖÒì²½µÄÉÏ´«Îļþ,¶ÔÏó # ´´½¨ var formData = new FormData(); * Ö±½Ó´´½¨ var formData = new FormData(document.getElementById('form')); * ͨ¹ýÒÑÓеÄform±íµ¥½øÐд´½¨ var form = document.getElementById("form"); var formData = form.getFormData() * ͨ¹ýÒÑÓеÄform±íµ¥½øÐд´½¨ ----------------------- FormData ÊôÐÔ | ----------------------- ----------------------- FormData ·½·¨ | ----------------------- append(key,value); * Ìí¼ÓÒ»¸ö¼üÖµ¶Ô set(key,value); * Ìí¼ÓÒ»¸ö¼üÖµ¶Ô * ¸ú append() µÄÇø±ðÊÇ£¬µ±Ö¸¶¨µÄ key Öµ´æÔÚʱ£¬append() ·½·¨Êǽ«ÐÂÔöµÄÌí¼ÓµÄËùÒԵļüÖµ¶Ô×îºó£¬¶øset()·½·¨½«»á¸²¸ÇÇ°ÃæµÄÉèÖõļüÖµ¶Ô¡£ delete(key); * ɾ³ýÖ¸¶¨µÄkey get(key); * ·µ»ØµÚÒ»¸ökey¶ÔÓ¦µÄÖµ getAll(key); * ·µ»ØËùÓÐkey¶ÔÓ¦µÄÖµ,·µ»ØµÄÊÇÒ»¸öÊý×é has(key); * ÅжÏÊÇ·ñÓиÃÖµ keys(); * ûÓвÎÊý,·µ»Øµü´úÆ÷,ÊÇËùÓеÄkeyÖµ * for (var key in formData.keys()) { console.log(key); } values(); * ͬÉÏ,²»¹ýÊÇvaluesµÄµü´ú entries(); * ÓеãÏñmapµÄÄǸöÄÚ²¿Àà,¿ÉÒÔ»ñÈ¡µ½keyºÍvalue * for(var pair in formData.entries()) { console.log(pair[0]+ ', '+ pair[1]); } ----------------------- FormData ʼþ | ----------------------- ----------------------- FormData Demo | ----------------------- # ʹÓà XMLHttpRequest ½øÐÐ±íµ¥Ìá½» var xhr = createXMLHttpRequest(); xhr.open("POST", "${ctxPath}/test/upload", true); xhr.send(formData); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200){ var text = xhr.responseText; JSON.parse(text); } } # ÕûºÏJqueryÒì²½ÉÏ´«Ê¾Àý function fileUpdload() { //´´½¨formData¶ÔÏó var form = new FormData(); //»ñÈ¡µ½Ñ¡ÔñÎļþ¶ÔÏó,×¢Òâ,files();·½·¨·µ»ØÊǸöÊý×é,ÒòΪÓпÉÄÜÊǶà¸öÎļþ var file = $("#file_upload")[0].files[0]; //Ìí¼ÓÎļþµ½formData¶ÔÏó,µÚÒ»¸ö²ÎÊý¾ÍÊÇÉÏ´«ÎļþµÄnameÊôÐÔ form.append("imgFile",file ); $.ajax({ url : '${pageContext.request.contextPath}/file/uploadFile', type : 'POST', data : form, processData : false, contentType : false, success : function(response) { }, error : function(response) { } }); } # Îļþ¿òµÄÊôÐÔ multiple="multiple" * Èç¹û¸ÃÊôÐÔ´æÔÚ,Ôò±íʾÔÊÐí¶àÑ¡ accept="image/gif,image/jpeg,image/png" * ¸ÃÖµ±íʾÔËÐиÃÎļþ¿òÑ¡ÔñÄÄЩÎļþ # ÎļþµÄ²¿·ÖÊôÐÔ 1, »ñÈ¡Îļþ¿ò¶ÔÏó * Ô­ÉúµÄ·½Ê½»ñÈ¡ var fileInput = document.getElementById("#file_upload"); * JQ»ñÈ¡ var fileInput = $("#file_upload")[0]; 2,´Ó¶ÔÏó»ñÈ¡ÎļþÁбí * ʹÓÃÎļþ¿ò¶ÔÏóµÄ:files();·½·¨»ñÈ¡ var files = fileInput.files(); //×¢Òâ,¸Ã files ÊǸöÊý×é,ÒòΪÎļþ¿ò¿ÉÄÜÑ¡ÔñµÄ¶à¸öÎļþ * ÊôÐÔ lastModified * ×îºóÒ»´ÎÐ޸ĵÄʱ¼ä´Á lastModifiedDate * ×îºóÒ»´ÎÐÞ¸Äʱ¼ä name * ÎļþÃû³Æ size * Îļþ´óС type * ÎļþÀàÐÍ webkitRelativePath * Ïà¶Ô·¾¶ * WEBÏÔʾ±¾µØͼƬ var url = window.URL.createObjectURL(files[0]); //ÔÚÄÚ´æÖиù¾ÝÎı¾´´½¨ÁËÒ»¸ö¶þ½øÖƶÔÏó $('#img').attr({'src':url}); //Ö±½Ó°ÑÕâ¸ö¶þ½øÖƶÔÏóÏÔʾµ½img,ҪעÒâÔÚÏÔʾ֮ºó,ÊͷŵôÄÚ´æ window.URL.revokeObjectURL(url); //ÊÍ·ÅÄÚ´æ # ½â¾öEasyui»ñÈ¡ File ¶ÔÏóµÄÎÊÌâ * Îļþ¿ò×é¼þ * onChange µÄÉÏ´«Ê¼þ function fileUpdload() { //¸ÃÖµÊÇÒ»¸ö×Ö·û´®,½ö½ö»ñÈ¡µÄÊDZ¾µØÎļþµÄ·¾¶Öµ,²¢²»ÄÜ»ñÈ¡µ½file¶ÔÏó var value = $(this).filebox('getValue'); TD.println(value); //¸Ã¶ÔÏó¾ÍÊÇÒ»¸öfile¶ÔÏóµÄÊý×é,ÒòΪfileÓпÉÄÜÊǶàÑ¡ var files = $('#filebox_file_id_1')[0].files; TD.println(files); } * filebox_file_id_1 Õâ¸öID ÊÇeasyui ×Ô¼º´´½¨µÄinput ±ãÇ©. ÕâÀïÃæÊÇÕæÕý±£´æÎļþµÄµØ·½. * Èç¹û´´½¨Á˶à¸ö filebox ÄÇôºóÃæµÄID ¾ÍÊÇfilebox_file_id_2,filebox_file_id_3.