如何在选择图像时直接使图像上载而不是在JQuery中按上载按钮
[英]How to make image upload directly while choosing image rather than pressing upload button in JQuery
问题描述
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. 在下面的<input type="file" id="pImage" name="image" class="upload-img" style="opacity:0">将显示上传的图像，而<input name="image" type="file"/>选择文件。 and <button>Upload</button> to upload the image. 和<button>Upload</button>上传图片。
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 在<input type="file" id="pImage" name="image" class="upload-img" style="opacity:0"> ，它将选择文件，但是我不想上传单击“上Upload button后每次都显示图像。如何在选择文件本身的同时使图像上载
HTML : 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 个解决方案
解决方案1
0 2014-11-12 04:53:17
解决方案2
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 有关更多信息，请访问以下链接， https：//github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
解决方案3
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() . 为了实现这一点，您需要使用.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. 使用此方法，当用户选择文件时，它应自动开始上传。
解决方案4
0 2014-11-12 05:42:38
try this : php file :file_path.php 试试这个： php文件 ：file_path.php
print_r($_FILES['user_image']); 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>
解决方案5
0 已采纳 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.