自定義文件上傳按鈕與blueimp jquery文件上傳

我很jquery文件上傳插件struckgeling上傳我的文件，只要我在我的輸入字段中選擇文件。自定義文件上傳按鈕與blueimp jquery文件上傳

我想有一個cusom提交按鈕，上傳的文件..

我怎樣才能做到這一點？

標記：

<span>Add File</span> 
<input id="fileupload" type="file" multiple="" data-url="upload.ashx" name="files[]" /> 

<label for="file_name">Name:</label> 
<input type="text" name="file_name" id="file_name" /> 

<input type="button" id="uploadFileBtn" value="Upload" />

的Javascript：

$('#fileupload').fileupload(
{ 
dataType: 'json', 
done: function (e, data) { 
    alert("success");        
} 
});

來源

2012-08-23 ffffff01

解決方案

的文件上傳了，一旦選擇了文件觸發一個添加事件。我在ADD事件中編寫了我的單擊事件，從而覆蓋了默認行爲。

經過測試，它按預期工作。

解決方案2 - jQuery的表格插件

一些經過研究我發現了一個更好的辦法來處理AJAX文件上傳。我正在使用在以下網址找到的Jquery表單插件：http://www.malsup.com/jquery/form/

它的工作原理與常規表單類似，可以處理文件輸入。

來源

2012-09-01 09:37:42 ffffff01

你能分享一下你的代碼嗎？ –

@ martin-g看看這個問題該怎麼做：http://stackoverflow.com/questions/13304838/how-to-upload-a-file-only-once-with-jquery-file-upload-plugin –

我發現了另一種更好的方法來處理ajax文件上傳。我正在使用jQuery表單插件。它的工作原理與常規格式一樣，可以處理文件輸入。 http://www.malsup.com/jquery/form/ – ffffff01

都是一樣的表單中輸入你的？

改變你的代碼：

<form id="fileupload" action="someAction" method="POST" enctype="multipart/form-data"> 
    <span>Add files</span> 
    <input type="file" name="files[]" multiple> 
    <button type="submit" class="btn btn-primary start"> 
     <span>Start upload</span> 
    </button> 
</form>

來源

2012-08-30 17:36:07

你可以通過掛鉤添加事件來做到這一點。你可以阻止上傳者執行其默認行爲。 jquery-file-upload-docs解釋說，但它有點難以找到。

以下是寫在blueimp basic uploader tutorial：

$(function() { 
    $('#fileupload').fileupload({ 
     dataType: 'json', 
     add: function (e, data) { 
      data.context = $('<button/>').text('Upload') 
       .appendTo(document.body) 
       .click(function() { 
        data.context = $('<p/>').text('Uploading...').replaceAll($(this)); 
        data.submit(); 
       }); 
     }, 
     done: function (e, data) { 
      data.context.text('Upload finished.'); 
     } 
    }); 
});

它實際上是非常重要的，那提交按鈕你創建的形式不是裏面！

來源

2014-12-03 17:47:42 schmijos

自定義文件上傳按鈕與blueimp jquery文件上傳

回答

相關問題