2014-04-29 138 views
0

我想通過嘗試通過PHP插入選定的文件到MySQL數據庫來實現blueimp jQuery文件上傳。使用blueimp jQuery文件上傳

我與Basic Plus UI一個工作,你可以找到here

下面的形式:

<form id="fileupload" action="" method="POST" enctype="multipart/form-data"> 
     <!-- Redirect browsers with JavaScript disabled to the origin page --> 
     <noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript> 
     <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> 
     <div class="row fileupload-buttonbar"> 
      <div class="col-lg-7"> 
       <!-- The fileinput-button span is used to style the file input field as button --> 
       <span class="btn btn-success fileinput-button"> 
        <i class="glyphicon glyphicon-plus"></i> 
        <span>Add files...</span> 
        <input type="file" name="files[]" multiple> 
       </span> 
       <button type="submit" class="btn btn-primary start"> 
        <i class="glyphicon glyphicon-upload"></i> 
        <span>Start upload</span> 
       </button> 
       <button type="reset" class="btn btn-warning cancel"> 
        <i class="glyphicon glyphicon-ban-circle"></i> 
        <span>Cancel upload</span> 
       </button> 
       <button type="button" class="btn btn-danger delete"> 
        <i class="glyphicon glyphicon-trash"></i> 
        <span>Delete</span> 
       </button> 
       <input type="checkbox" class="toggle"> 
       <!-- The global file processing state --> 
       <span class="fileupload-process"></span> 
      </div> 
      <!-- The global progress state --> 
      <div class="col-lg-5 fileupload-progress fade"> 
       <!-- The global progress bar --> 
       <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"> 
        <div class="progress-bar progress-bar-success" style="width:0%;"></div> 
       </div> 
       <!-- The extended global progress state --> 
       <div class="progress-extended">&nbsp;</div> 
      </div> 
     </div> 
     <!-- The table listing the files available for upload/download --> 
     <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table> 
    </form> 

我想要的形式發送到一個名爲process.php頁能夠處理所有的數據和上傳將這些文件保存到數據庫表中。

我很困惑所有的jQuery的東西,因爲它似乎發送到表單。

你能幫助我理解如何通過處理它的PHP頁面將選定的文件發送到分貝。

我可以處理我只需要知道如何將表單發送到一個PHP頁面,通過$_FILES[files]獲取所有選擇的文件的所有處理。

我已經嘗試設置action="process.php",但是當我點擊提交按鈕時,這並沒有做任何事情。

+1

哦,你能評論你爲什麼downvoted而不是僅僅做它嗎? – user3574492

回答

1

您必須指定上傳處理程序的位置;在fileupload的init代碼上。

HTML

<!-- The fileinput-button span is used to style the file input field as button --> 
<span class="btn btn-success fileinput-button"> 
    <i class="glyphicon glyphicon-plus"></i> 
    <span>Add files...</span> 
    <!-- The file input field used as target for the file upload widget --> 
    <input id="fileupload" type="file" name="files[]" multiple> 
</span> 
<br> 
<br> 
<!-- The global progress bar --> 
<div id="progress" class="progress"> 
    <div class="progress-bar progress-bar-success"></div> 
</div> 
<!-- The container for the uploaded files --> 
<div id="files" class="files"></div> 

JS

$('#fileupload').fileupload({ 
    url: 'server/index.php', 
    dataType: 'json', 
    autoUpload: false, 
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, 
    maxFileSize: 5000000, // 5 MB 
    // Enable image resizing, except for Android and Opera, 
    // which actually support image resizing, but fail to 
    // send Blob objects via XHR requests: 
    disableImageResize: /Android(?!.*Chrome)|Opera/ 
     .test(window.navigator.userAgent), 
    previewMaxWidth: 100, 
    previewMaxHeight: 100, 
    previewCrop: true 

    // rest of the code snipped 

附:不要編寫自己的上傳處理程序。看看他們的例子,看看它是如何實現的。

看看這些:

+0

這個文件上傳的init代碼究竟在哪裏? – user3574492

+0

這是初始化上傳插件的JavaScript代碼;即'$('#fileupload')。fileupload({...});' – Latheesan

0

@ user3574492:哥們。我試圖在asp.net環境中實現相同的解決方案。你猜怎麼着?我正在使用處理程序上傳我的文件,並且它不工作(不調用我的處理程序),除非我將表單ID重命名爲除「fileupload」之外的其他內容,這會使上載按鈕調用我的處理程序並且文件將會上載。重命名錶單ID後發生的唯一問題是,您無法看到您選擇用於上傳的隊列中的文件的預覽(比方說,顯示上傳隊列的Gridview)...我認爲應該在這裏與「fileupload」的表單ID衝突。

相關問題