JQuery文件上傳，它去哪裏？

關於使用JQuery文件上傳插件，我一直在關注This tutorial。一切都很好，當我選擇一個文件上傳瀏覽器沒有錯誤，但該文件似乎並沒有上傳。我可能是錯的，但我認爲該文件將位於項目目錄（eclipse）中的uploads文件夾中。下面是代碼：JQuery文件上傳，它去哪裏？

的index.html

<!DOCTYPE html> 
<html> 

    <head> 
     <meta charset="utf-8"/> 
     <title>Mini Ajax File Upload Form</title> 

     <!-- Google web fonts --> 
     <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' /> 

     <!-- The main CSS file --> 
     <link href="assets/css/style.css" rel="stylesheet" /> 
    </head> 

    <body> 

     <form id="upload" method="post" action="upload.php" enctype="multipart/form-data"> 
      <div id="drop"> 
       Drop Here 

       <a>Browse</a> 
       <input type="file" name="upl" multiple /> 
      </div> 

      <ul> 
       <!-- The file uploads will be shown here --> 
      </ul> 

     </form> 

     <!-- JavaScript Includes --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script src="assets/js/jquery.knob.js"></script> 

     <!-- jQuery File Upload Dependencies --> 
     <script src="assets/js/jquery.ui.widget.js"></script> 
     <script src="assets/js/jquery.iframe-transport.js"></script> 
     <script src="assets/js/jquery.fileupload.js"></script> 

     <!-- Our main JS file --> 
     <script src="assets/js/script.js"></script> 

    </body> 
</html>

的script.js

$(function(){ 

    var ul = $('#upload ul'); 

    $('#drop a').click(function(){ 
     // Simulate a click on the file input button 
     // to show the file browser dialog 
     $(this).parent().find('input').click(); 
    }); 

    // Initialize the jQuery File Upload plugin 
    $('#upload').fileupload({ 

     // This element will accept file drag/drop uploading 
     dropZone: $('#drop'), 

     // This function is called when a file is added to the queue; 
     // either via the browse button, or via drag/drop: 
     add: function (e, data) { 

      var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+ 
       ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>'); 

      // Append the file name and file size 
      tpl.find('p').text(data.files[0].name) 
         .append('<i>' + formatFileSize(data.files[0].size) + '</i>'); 

      // Add the HTML to the UL element 
      data.context = tpl.appendTo(ul); 

      // Initialize the knob plugin 
      tpl.find('input').knob(); 

      // Listen for clicks on the cancel icon 
      tpl.find('span').click(function(){ 

       if(tpl.hasClass('working')){ 
        jqXHR.abort(); 
       } 

       tpl.fadeOut(function(){ 
        tpl.remove(); 
       }); 

      }); 

      // Automatically upload the file once it is added to the queue 
      var jqXHR = data.submit(); 
     }, 

     progress: function(e, data){ 

      // Calculate the completion percentage of the upload 
      var progress = parseInt(data.loaded/data.total * 100, 10); 

      // Update the hidden input field and trigger a change 
      // so that the jQuery knob plugin knows to update the dial 
      data.context.find('input').val(progress).change(); 

      if(progress == 100){ 
       data.context.removeClass('working'); 
      } 
     }, 

     fail:function(e, data){ 
      // Something has gone wrong! 
      data.context.addClass('error'); 
     } 

    }); 


    // Prevent the default action when a file is dropped on the window 
    $(document).on('drop dragover', function (e) { 
     e.preventDefault(); 
    }); 

    // Helper function that formats the file sizes 
    function formatFileSize(bytes) { 
     if (typeof bytes !== 'number') { 
      return ''; 
     } 

     if (bytes >= 1000000000) { 
      return (bytes/1000000000).toFixed(2) + ' GB'; 
     } 

     if (bytes >= 1000000) { 
      return (bytes/1000000).toFixed(2) + ' MB'; 
     } 

     return (bytes/1000).toFixed(2) + ' KB'; 
    } 

});

upload.php的

<?php 

// A list of permitted file extensions 
$allowed = array('png', 'jpg', 'gif','zip'); 

if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){ 

    $extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION); 

    if(!in_array(strtolower($extension), $allowed)){ 
     echo '{"status":"error"}'; 
     exit; 
    } 

    if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){ 
     echo '{"status":"success"}'; 
     exit; 
    } 
} 

echo '{"status":"error"}'; 
exit;

鋁l其他所需的js文件也存在。當我在Tomcat運行它，我的輸出是這樣的：

Browser view/console output/project structure

我刷新項目，以及所以這不是它。任何幫助將是偉大的，謝謝。

來源

2013-12-12 Sionnach733

您沒有在服務器上運行PHP，所以上傳並不保存在任何地方。

您需要在服務器上安裝PHP，移至安裝了PHP的服務器或更改爲其他語言。

它看起來像你使用的是Windows。你可以嘗試使用WAMP-server。

來源

2013-12-12 12:35:36

你怎麼能告訴服務器沒有安裝PHP？ – Scott

因爲PHP源代碼被髮送到firefox/firebug。如果安裝了PHP，PHP腳本就會執行。現在Web服務器只是認爲它是純文本，並將其原樣發送到瀏覽器。 –

JQuery文件上傳，它去哪裏？

回答

相關問題