AJAXベースのアップロードにjQueryファイルのアップロードを使用しています。ファイルが選択された後、常にアップロードを開始します。「送信」ボタンを使用するように動作を変更することは可能ですか？問題＃35を認識していますが、オプションbeforeSendが削除されたようです。
フルバージョンではなく、基本プラグインを使用しています。
たぶん、そこで提案されているように、プレーンXHRベースのアップロードに切り替える必要があります：jQueryUploadProgressとAJAXfileupload。
ボタンがある場合
<button id="up_btn">Upload</button>
あなたはで試すことができます
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
$("#up_btn").off('click').on('click', function () {
data.submit();
});
},
});
off編集：コメントによると、重複したリクエストを避けるために、より良い答えを検討してください。（また動作unbindします、私はそうであるかどうかをチェックしませんがbind、unbindjqueryチームは1.7以降を推奨onしてoff リンクします）
これらの回答はいずれも、複数のファイルのアップロードでは機能しません。私の場合、コメントスレッドで複数の添付ファイルを許可する必要がありました。そのため、最初にコメントを保存してIDを取得してから、すべての添付ファイルをアップロードして保存する必要がありました。これは些細なことのように思えますが、このプラグインではそれほど直感的ではありません。私のソリューションはjQueryのカスタムイベントを使用しており、うまく機能します。
現在受け入れられている回答は、「追加」コールバックのボタンのクリックイベントにバインドされますが、「追加」コールバックはファイルごとに1回呼び出されます。毎回すべてのイベントのバインドを解除すると、最後のファイルのみがアップロードされます。
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
$("#up_btn").on('customName', function (e) {
data.submit();
});
},
});
送信ボタンをカスタム名にバインドすることで、画像を送信する前に必要な前処理を行うことができます。私の場合、コメントを送信し、別の呼び出しで行ったコメントIDを取得する必要がありました。このコードはクリックに応答するだけですが、イベントをトリガーする前に好きなことを行うことができます。
$("#up_btn").on('click', function (e) {
e.preventDefault();
$("#up_btn").trigger( "customName");
});
イベントをトリガーするときに必要なデータを渡すことができるため、フォームを完全に制御できます。
jquery.fileupload.jsにもあります
行142に「autoUpload」オプションがあります。
uploadedBytes: undefined,
// By default, failed (abort or error) file uploads are removed from the
// global progress calculation. Set the following option to false to
// prevent recalculating the global progress data:
recalculateProgress: true,
// Interval in milliseconds to calculate and trigger progress events:
progressInterval: 100,
// Interval in milliseconds to calculate progress bitrate:
bitrateInterval: 500,
// By default, uploads are started automatically when adding files:
autoUpload: true // <<---------- here
addイベントにフックすることでそれを行うことができます。そこで、アップローダーがデフォルトの動作を実行できないようにします。jquery-file-upload -docsはそれを説明していますが、見つけるのは少し難しいです。
以下は、blueimpの基本的なアップローダーチュートリアルで書かれています。
$(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.');
}
});
});
実際には、作成している送信ボタンがフォーム内にないことが非常に重要です。
ファイルが追加されるたびにイベントを添付して、イベントをスタックしないようにしてください。そうすれば、フォームは複数回送信されます。
私はこのようなことをします
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
$("#up_btn").off('click').on('click', function () {
data.submit();
});
},
});
以前に添付されたすべてのイベントを削除するoff（）メソッドに注意してください。
追加テンプレートを使用して、アップロードとダウンロードの表示をフォローするには、この方法で行う必要があります
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
var that = this;
$.blueimp.fileupload.prototype.options.add.call(that, e, data);
$("#up_btn").on('click', function () {
data.submit();
});
},
});ダウンロードしたサンプルでナビゲートしjs/jquery.fileupload-ui.js、デフォルトautoUploadで設定されているものを「 」に設定すると、送信動作を使用できます。truefalse
編集：
基本的な実装のためにこれを試してください：
<script>
/*global $ */
$(function() {
$('.file_upload').fileUploadUI({
url: 'FileUpload.ashx',
method: 'POST',
uploadTable: $('#files'),
downloadTable: $('#files'),
buildUploadRow: function (files, index) {
return $('<tr><td>' + files[index].name + '<\/td>' +
'<td class="file_upload_progress"><div><\/div><\/td>' +
'<\/td><\/tr>');
},
buildDownloadRow: function(file) {
return $('<tr id="file_'+file.name+'"><td>' + file.name + '<\/td>'
+ '<td class="file_uploaded">' +
'<span class="ui-icon ui-icon-check"><\/span>' +
'<\/td><\/tr>');
}, beforeSend: function(event, files, index, xhr, handler, callBack) {
if (files[index].size > 500000) {
handler.uploadRow.find('.file_upload_progress').html('<span class="ui-icon ui-icon-alert"><\/span>FILE TOO BIG!');
setTimeout(function() {
handler.removeNode(handler.uploadRow);
}, 10000);
return;
}
callBack();
}
});
});
</script>
ボタンを使用してファイルのアップロードを実装した方法は次のとおりです。
ボタンは次のとおりです。
<button id="cmdSave" type="button" class="btn btn-primary" onclick="SaveInfo();">Save</button>
入力要素は次のとおりです。
<input id="fileupload" type="file" name="files[]" style="display: none;">
SaveInfo（）関数は次のとおりです。
//use this function to save Info with Attached file
function SaveInfo() {
// setup our wp ajax URL
var action_url = document.location.protocol + '//' + document.location.host + '/SaveInfo';
$('body').addClass('waiting');
//get the file(s)
var filesList = $('input[type="file"]').prop('files');
//Initialize the file uploader
$('#Editor').fileupload(); //Editor is the Id of the form
//Along with file, this call internally sends all of the form data!!!
$('#Editor').fileupload('add', {
files: filesList,
url: action_url
})
$('#Editor').bind('fileuploaddone', function (e, data) {
e.preventDefault(); //stop default behaviour!
if (data.result.status == 1) { //saved!
//do something useful here...
}
$('body').removeClass('waiting');
});
// Callback for failed (abort or error) uploads:
$('#Editor').bind('fileuploadfail', function (e, data) {
e.preventDefault(); //stop default behaviour!
$('body').removeClass('waiting');
});
}
注：あまりエレガントではないかもしれませんが、私にとってはうまくいきます。これにより、フォーム内のすべてのフィールドもサーバーに送信されます。これは、ファイルもアップロードされている場合にのみ、フォーム内のフィールドを送信します。ファイルが存在しない場合、これはフォームデータをサーバーに送信しません！複数のファイルでテストしていませんが、このメソッドを拡張して複数のファイルを作成することもできます。試してみると、この投稿を情報で更新します。