[英]How to make image upload directly while choosing image rather than pressing upload button in JQuery
如何制作脚本来制作上传文件，而不是在下面的脚本中按上载按钮
在下面的<input type="file" id="pImage" name="image" class="upload-img" style="opacity:0">将显示上传的图像，而<input name="image" type="file"/>选择文件。 和<button>Upload</button>上传图片。
在<input type="file" id="pImage" name="image" class="upload-img" style="opacity:0"> ，它将选择文件，但是我不想上传单击“上Upload button后每次都显示图像。如何在选择文件本身的同时使图像上载
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>
$("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>
我不确定您到底想要什么，但请看.trigger（）文档在这里 。 这样一来，您就可以触发其他任何事件，例如在您的情况下单击“上传”。希望有帮助
通过使用以下代码，我认为它将解决您的问题，
<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>
有关更多信息，请访问以下链接， https：//github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
为了实现这一点，您需要使用.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>
使用此方法，当用户选择文件时，它应自动开始上传。
试试这个： php文件 ：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>
即
$("input[type='file']").on("change", function()
{
$("form#data").submit();
});
修改后的脚本是
<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>
选择文件后如何立即上传图像，而不是强制用户单击单独的“上传”按钮？
[英]How to upload image immediately after file is selected, rather than force user to click separate "Upload" button?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.