瑕佷娇鐢╝jaxfileupload.js瀹炵幇鏂囦欢涓婁紶鍔熻兘锛岄鍏堥渶瑕佺‘淇濆凡缁忓紩鍏ヤ簡jQuery搴撱€?/span>

浠ヤ笅鏄疄鐜版枃浠朵笂浼犵殑姝ラ锛?/span>

1. 涓嬭浇ajaxfileupload.js鏂囦欢锛屽苟灏嗗畠娣诲姞鍒颁綘鐨勯」鐩腑銆?/span>

2. 鍦℉TML椤甸潰涓垱寤轰竴涓枃浠朵笂浼犵殑琛ㄥ崟锛屽涓嬫墍绀猴細

   <form id="uploadForm" enctype="multipart/form-data">
       <input type="file" name="file" id="fileInput">
       <input type="submit" value="涓婁紶鏂囦欢">
   </form>

3. 鍦↗avaScript涓紝缂栧啓浠ヤ笅浠ｇ爜鏉ュ鐞嗘枃浠朵笂浼犱簨浠跺苟璋冪敤ajaxfileupload鍑芥暟锛?/span>

   $(document).ready(function() {
       $('#uploadForm').on('submit', function(e) {
           e.preventDefault();
           // 鑾峰彇鏂囦欢杈撳叆妗嗙殑鍊?/p>
           var fileInput = $('#fileInput');
           var file = fileInput[0].files[0];
           // 鍒涘缓FormData瀵硅薄锛岀敤浜庡彂閫佹枃浠舵暟鎹?/p>
           var formData = new FormData();
           formData.append('file', file);
           // 浣跨敤ajaxfileupload鍑芥暟鍙戦€佹枃浠舵暟鎹?/p>
           $.ajaxFileUpload({
               url: 'upload.php', // 鏇挎崲涓?span class="in-link" data-id="53">鏈嶅姟鍣?/span>绔帴鏀舵枃浠剁殑URL
               secureuri: false,
               fileElementId: 'fileInput',
               dataType: 'json',
               data: formData,
               success: function(response) {
                   // 鏂囦欢涓婁紶鎴愬姛鍚庣殑鍥炶皟鍑芥暟
                   console.log('鏂囦欢涓婁紶鎴愬姛');
                   console.log(response);
               },
               error: function(response) {
                   // 鏂囦欢涓婁紶澶辫触鍚庣殑鍥炶皟鍑芥暟
                   console.log('鏂囦欢涓婁紶澶辫触');
                   console.log(response);
               }
           });
       });
   });

4. 鍦ㄤ笂杩颁唬鐮佷腑锛岄渶瑕佸皢url灞炴€х殑鍊兼浛鎹负鏈嶅姟鍣ㄧ鎺ユ敹鏂囦欢鐨刄RL锛屽苟鏍规嵁闇€瑕佷慨鏀规垚鍔熷拰澶辫触鏃剁殑鍥炶皟鍑芥暟銆?/span>

5. 鍦ㄦ湇鍔″櫒绔帴鏀舵枃浠剁殑鑴氭湰锛堝upload.php锛変腑锛屽彲浠ヤ娇鐢ㄥ父鐢ㄧ殑鏈嶅姟鍣ㄧ璇█锛堝PHP銆丯ode.js绛夛級鏉ュ鐞嗕笂浼犵殑鏂囦欢銆?/span>

浠ヤ笂灏辨槸浣跨敤ajaxfileupload.js瀹炵幇鏂囦欢涓婁紶鍔熻兘鐨勫熀鏈楠ゃ€備綘鍙互鏍规嵁鑷繁鐨勯」鐩渶姹傝繘琛岃繘涓€姝ョ殑瀹氬埗鍜屼紭鍖栥€?/span>