扫描二维码下载沐宇APP

沐宇

微信扫码使用沐宇小程序

沐宇

ajaxfileupload.js鎬庝箞瀹炵幇涓婁紶鏂囦欢鍔熻兘

扬州沐宇科技
2024-02-28 18:04:21
js

瑕佸疄鐜版枃浠朵笂浼犲姛鑳斤紝鍙互浣跨敤ajaxfileupload.js鎻掍欢鏉ョ畝鍖栨枃浠朵笂浼犵殑杩囩▼銆備互涓嬫槸涓€涓畝鍗曠殑绀轰緥浠g爜鏉ユ紨绀哄浣曚娇鐢╝jaxfileupload.js瀹炵幇鏂囦欢涓婁紶鍔熻兘锛?/p>

  1. 棣栧厛锛屽湪html鏂囦欢涓紩鍏jaxfileupload.js鎻掍欢锛?/li>
<script src="ajaxfileupload.js"></script>
  1. 鎺ヤ笅鏉ワ紝鍒涘缓涓€涓笂浼犳枃浠剁殑琛ㄥ崟锛屽苟娣诲姞涓€涓笂浼犳寜閽細
<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
    <input type="button" value="Upload" onclick="uploadFile()">
</form>
  1. 鐒跺悗锛屽湪JavaScript鏂囦欢涓紪鍐欎笂浼犳枃浠剁殑鍑芥暟锛?/li>
function uploadFile() {
    // 鑾峰彇鏂囦欢杈撳叆妗嗕腑閫夋嫨鐨勬枃浠?/span>
    var file = document.getElementById('file').files[0];
    
    // 浣跨敤ajaxfileupload.js鎻掍欢涓婁紶鏂囦欢
    $.ajaxFileUpload({
        url: 'upload.php',  // 涓婁紶鏂囦欢鐨勫悗绔帴鍙?/span>
        secureuri: false,
        fileElementId: 'file',
        dataType: 'json',
        success: function (data, status) {
            // 鏂囦欢涓婁紶鎴愬姛鍚庣殑澶勭悊閫昏緫
            console.log('File uploaded successfully');
        },
        error: function (data, status, e) {
            // 鏂囦欢涓婁紶澶辫触鍚庣殑澶勭悊閫昏緫
            console.log('File upload failed');
        }
    });
}
  1. 鏈€鍚庯紝闇€瑕佸湪鍚庣缂栧啓涓€涓鐞嗘枃浠朵笂浼犵殑鎺ュ彛upload.php锛?/li>
<?php
if ($_FILES["file"]["error"] > 0) {
    echo "Error: " . $_FILES["file"]["error"];
} else {
    move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . $_FILES["file"]["name"]);
    echo "File uploaded successfully";
}
?>

浠ヤ笂灏辨槸浣跨敤ajaxfileupload.js瀹炵幇鏂囦欢涓婁紶鍔熻兘鐨勭畝鍗曠ず渚嬨€傚湪瀹為檯椤圭洰涓紝鍙互鏍规嵁鍏蜂綋闇€姹傚鏂囦欢涓婁紶鐨勫姛鑳借繘琛屾墿灞曞拰浼樺寲銆?/p>

扫码添加客服微信