1
私はイメージのウェブサイトを持っています。私は一度に多くのユーザーがアップロードできるようにしたい。画像アップロードスクリプトを作成しました。ボタンをクリックすると複数のフォームを送信します。
HTML
<div class="container">
<h1>Image Uploader</h1>
<input type="file" name="images[]" id="images" multiple>
<br>
<div id="images-to-upload" class="row">
</div>
<br>
<div class="col-md-12">
<button id="upload_button" class="btn btn-sm btn-success col-md-4 col-xs-12">Upload all images</button>
</div>
</div>
jQueryの
<script>
$(document).ready(function() {
var fileCollection = new Array();
$('#images').on('change', function(e) {
var files = e.target.files;
$.each(files, function(i, file) {
fileCollection.push(file);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var template = '<form class="upload_form col-md-6 col-xs-12" action="/upload">' +
'<img class="col-md-4 col-xs-4" src="' + e.target.result + '"> ' +
'<input style="width:90px; height:28px" class="col-md-2 col-xs-4" type="number" name="table" id="table" >' +
'<input style="margin:0px 5px 0px 5px; width:95px" type="submit" class="btn btn-sm btn-primary col-md-3 col-xs-3 submit_form" value="Upload" name="submit_weight">' +
'<button type="button" class="btn btn-sm btn-danger remove_form col-md-2 col-xs-6">Cancel</button>' +
'<div style="height: 30px; font-size: 20px; margin: 0px 0px 10px 0px; padding: 0px; text-align: center;" class="progress col-md-7 col-xs-6 progress-stripped active"><div class="progress-bar" style="font-size: 15px; width:0%"></div></div> ' +
'</form>';
$('#images-to-upload').append(template);
};
});
});
$(document).on('submit', 'form', function(e) {
e.preventDefault();
$form = $(this);
var index = $(this).index();
var formdata = new FormData($(this)[0]);
formdata.append('images', fileCollection[index]);
var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function(e) {
var percent = e.loaded/e.total * 100;
$form.find('.progress-bar').width(percent + '%').html(percent + '%');
});
// progress complete load event
request.addEventListener('load', function() {
$form.find('.progress-bar').addClass('progress-bar-success').html('Upload Completed....');
});
request.open('post', 'script/file_upload_admin.php');
request.send(formdata);
$form.on('click', '.remove_form', function() {
console.log("Cancel");
alert("hello");
$(this).hide();
});
});
});
$("#upload_button").on('click', function(event) {
event.preventDefault();
$(".submit_form").click();
});
</script>
ユーザーが1つは、それが動作することで、フォーム1を送信すると、私の問題があります。ユーザーが[すべての画像をアップロード]をクリックすると、フォームデータは、1フォームデータのテーブル入力値が別のフォームで設定されたようなミックスになります。