动态地从另一个输入中设置输入值 [英] Set input value in form from another Input , dynamically
本文介绍了动态地从另一个输入中设置输入值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图将图片上传到网站并标题。我希望用户在上传前查看图片。
I trying to upload image to website with its title . I want user to see image before uploading .
HTML
$ b
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在DIV中添加表单。
Jquery
When user select some images , Jquery add image with form in DIV . Jquery
<script>
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 enctype="multipart/form-data" class="upload_form col-md-6 col-xs-12" action="/upload">' +
'<img id="img_xx" name="images" 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="width:90px; height:28px" class="col-md-2 col-xs-4" type="file" name="images" value="' + e.target.result + '" >' +
'<button style="margin:0px 5px 0px 5px; width:95px" class="btn btn-sm btn-primary col-md-3 col-xs-3 submit_form" value="Upload" name="submit_weight">Upload</button>' +
'<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();
var formdata = new FormData(this);
$form = $(this);
var request = new XMLHttpRequest();
request.open('post', 'script/file_upload_admin.php', true);
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>
我的问题是如何设置FileReader的输入值,因此图像可以通过表单数据发送。
My problem is how i set value of input from FileReader , so image can be send in form data . I tried below method but its not working.
$(document).on('submit','form',function(e){
e.preventDefault();
//this form index
var index = $(this).index();
var formdata = new Formdata($(this)[0]); //direct form not object
//append the file relation to index
formdata.append(fileCollection[index]);
var request = new XMLHttpRequest();
request.open('post', 'script/file_upload_admin.php', true);
request.send(formdata);
});
推荐答案
也许这可以帮助你。
maybe this can help you.
<div class="container">
<h1>Image Uploader</h1>
<input id="fileItem" 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>
Javascript
Javascript
$('#upload_button').click(function(){
var files = document.getElementById('fileItem').files;
console.log(files)
$.each(files, function(index, item) {
//console.log(index, item);
console.log(item.name);
// here you can do anything with name of file.
// maybe here you can create your form
});
});
测试 jsfiddle
这篇关于动态地从另一个输入中设置输入值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文