How to make image upload directly while choosing image rather than pressing upload button in JQuery
Question
How to make the script to make upload file rather than pressing upload button in the below script
Detail :
In the below the <input type="file" id="pImage" name="image" class="upload-img" style="opacity:0"> will display the image that is uploaded and the <input name="image" type="file"/> to choose the file. and <button>Upload</button> to upload the image.
And in the <input type="file" id="pImage" name="image" class="upload-img" style="opacity:0"> it will choose the file, But i don't want to upload the image every time after clicking on the Upload button How can make the image upload while choosing the file itself
HTML :
<div id="image" class="upload-img-span"></div>
<input type="file" id="pImage" name="image" class="upload-img" style="opacity:0">
<span class="upload-txt-span">Upload Img</span>
</div>
</td>
</tr>
<td colspan="4" align="left">
<input name="image" type="file"/>
<button>Upload</button>
Script :
<script>
$("form#data").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: 'globalimageupload',
type: 'POST',
data: formData,
async: false,
success: function (data)
{
$('#image').html(data);
console.log(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
</script>
5 answers
solution1
0 2014-11-12 04:53:17
I am not sure what you exactly want but take a look at .trigger() docs are here . By this you can trigger any other event, say click of upload in your case.Hope it helps
solution2
0 2014-11-12 05:12:42
By using following code i think it will solve your problem,
<html> <head> <meta charset="utf-8"> <title>jQuery File Upload Example</title> </head> <body> <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/vendor/jquery.ui.widget.js"></script> <script src="js/jquery.iframe-transport.js"></script> <script src="js/jquery.fileupload.js"></script> <script> $(function () { $('#fileupload').fileupload({ dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { $('<p/>').text(file.name).appendTo(document.body); }); } }); }); </script> </body> </html>
For more information please visit followin link, https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
solution3
0 2014-11-12 05:41:20
In order to pull this off, you'll need to initiate the function with something other than .submit() .
<script>
$('input[type=file]').change(function() {
$("form#data").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: 'globalimageupload',
type: 'POST',
data: formData,
async: false,
success: function (data)
{
$('#image').html(data);
console.log(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
});
</script>
With this method, when the user chooses a file it should start the upload automatically.
solution4
0 2014-11-12 05:42:38
try this : php file :file_path.php
print_r($_FILES['user_image']);
$('#click_img_btn').click(function() { $('#image_fl_upload').click(); }); $('#image_fl_upload').change(function() { var formData = new FormData($('#image_up')[0]); $.ajax({ url: 'file_path.php', type: 'POST', data: formData, async: false, success: function (data) { alert(data); }, cache: false, contentType: false, processData: false }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="" name="save_user_photo1" id="image_up" class="profile_photo_upload" method="post" enctype="multipart/form-data"> <input id="image_fl_upload" type="file" name="user_image" style="visibility:hidden" /> <input id="click_img_btn" name="save_user_photo" class="btn_change" type="button" value="change"/> </form>
solution5
0 ACCPTED 2014-11-12 07:14:10
I Solved it by Triggering the function inside the own function
ie,
$("input[type='file']").on("change", function()
{
$("form#data").submit();
});
And the modified script is
<script>
$(document).ready(function()
{
$("form#data").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: 'globalimageupload',
type: 'POST',
data: formData,
async: true,
success: function (data)
{
$('#image').html(data);
console.log(data);
},
cache: false,
contentType: false,
processData: false
});
return false;
});
$("input[type='file']").on("change", function()
{
$("form#data").submit();
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.