[英]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.