上傳文件時出錯

Question

選擇要上傳的圖片文件時，我總是收到ERROR: Please browse for a file before clicking the upload button.。我試圖達到上傳文件onchange，而不是點擊提交更友好的用戶體驗。

HTML

<div id="profilephoto" class="profilephoto" data-coupling="#content2"><img src="<?php echo $avatar ?>"></div> 
    <div id="content2" style="display: none;" class="uploadbutton" data-coupling="#content2"> 
     <form id="imguploadin" method="POST" action="image_upload_script.php"> 
      <label class="cabinet"> <i class="icon-upload-alt"></i> Choose Photo 
       <input type="file" name="uploaded_file" class="file" onchange="handleFiles(this.files)"/> 
      </label> 
     </form> 
    </div> 

的jQuery/JavaScript的

function handleFiles(files) { 
    for (var i = 0; i < files.length; i++) { 
     var file = files[i]; 
     var imageType = /image.*/; 

     if (!file.type.match(imageType)) { 
      continue; 
     } 

     var img = document.createElement("img"); 
     img.classList.add("newphoto"); 
     img.file = file; 
     profilephoto.appendChild(img); 

     var reader = new FileReader(); 
     reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); 
     reader.readAsDataURL(file); 
     var eventt = jQuery.Event("submit"); 

     $("#imguploadin").trigger(eventt); 
    } 
} 

PHP（image_upload_script.php）

<?php 
session_start(); 
// Access the $_FILES global variable for this specific file being uploaded 
// and create local PHP variables from the $_FILES array of information 
$username = $_SESSION["username"]; 
$fileName = $_FILES["uploaded_file"]["name"]; // The file name 
$fileTmpLoc = $_FILES["uploaded_file"]["tmp_name"]; // File in the PHP tmp folder 
$fileType = $_FILES["uploaded_file"]["type"]; // The type of file it is 
$fileSize = $_FILES["uploaded_file"]["size"]; // File size in bytes 
$fileErrorMsg = $_FILES["uploaded_file"]["error"]; // 0 for false... and 1 for true 
$kaboom = explode(".", $fileName); // Split file name into an array using the dot 
$fileExt = end($kaboom); // Now target the last array element to get the file extension 
// START PHP Image Upload Error Handling -------------------------------------------------- 
if (!$fileTmpLoc) { // if file not chosen 
    echo "ERROR: Please browse for a file before clicking the upload button."; 
    exit(); 
} else if ($fileSize > 1242880) { // if file size is larger than 5 Megabytes 
    echo "ERROR: Your file was larger than 5 Megabytes in size."; 
    unlink($fileTmpLoc); // Remove the uploaded file from the PHP temp folder 
    exit(); 
} else if (!preg_match("/.(gif|jpg|png)$/i", $fileName)) { 
    // This condition is only if you wish to allow uploading of specific file types 
    echo "ERROR: Your image was not .gif, .jpg, or .png."; 
    unlink($fileTmpLoc); // Remove the uploaded file from the PHP temp folder 
    exit(); 
} else if ($fileErrorMsg == 1) { // if file upload error key is equal to 1 
    echo "ERROR: An error occured while processing the file. Try again."; 
    exit(); 
} 
// END PHP Image Upload Error Handling ---------------------------------------------------- 
// Place it into your "uploads" folder mow using the move_uploaded_file() function 
$moveResult = move_uploaded_file($fileTmpLoc, "images/users/$username.$fileExt"); 
// Check to make sure the move result is true before continuing 
if (!$moveResult) { 
    echo "ERROR: File not uploaded. Try again."; 
    unlink($fileTmpLoc); // Remove the uploaded file from the PHP temp folder 
    exit(); 
} 
// ---------- Include Adams Universal Image Resizing Function -------- 
include_once("ak_php_img_lib_1.0.php"); 
$target_file = "images/users/$username.$fileExt"; 
$resized_file = "images/users/resized_$username.$fileExt"; 
$wmax = 200; 
$hmax = 150; 
ak_img_resize($target_file, $resized_file, $wmax, $hmax, $fileExt); 
$thumbnail = "images/users/thumb_$username.$fileExt"; 
$wthumb = 150; 
$hthumb = 150; 
ak_img_thumb($target_file, $thumbnail, $wthumb, $hthumb, $fileExt); 
// ----------- Write Image File path to the server --------------------------------- 
$sql_user = "myuser"; 
$sql_pass = "mypassword"; 
$sql_ip = "localhost"; 
$sql_DB = "mydb"; 
if ($moveResult != true) 
    echo("couldnt write file path to database due to unsuccesfull upload"); 
    else { 
    $mysqli = new mysqli($sql_ip, $sql_user, $sql_pass, $sql_DB); 
    if ($stmt = $mysqli->prepare("UPDATE users SET avatar=? WHERE username=?")) { 
     $user = $_SESSION['username']; 
     $avatar = $resized_file; 
     $stmt->bind_param('ss', $avatar, $user); 
     $stmt->execute(); 
     $stmt->close(); 
     //header('location: profile.html'); 
     return true; 
    } 
    $mysqli->close(); 
    } 

// ----------- End Adams Universal Image Resizing Function ----------- 
// Display things to the page so you can see what is happening for testing purposes 
echo "The file named <strong>$username.$fileExt</strong> uploaded successfuly.<br /><br />"; 
echo "It is <strong>$fileSize</strong> bytes in size.<br /><br />"; 
echo "It is an <strong>$fileType</strong> type of file.<br /><br />"; 
echo "The file extension is <strong>$fileExt</strong><br /><br />"; 
echo "The Error Message output for this upload is: $fileErrorMsg"; 
?> 

Answer 1

您的形式缺少上傳文件所需的enctype="multipart/form-data"屬性。