输入文件的第二次使用不会再触发变化 [英] Second use of input file doesn't trigger onchange anymore
问题描述
我有一个图片上传按钮，当从浏览窗口中选择时，会自动上传文件。
但是，它不会再次运行，这是因为onChange事件没有被触发。为什么会这样？
这是一个用例：
1.点击按钮， uploadMessagePicture（），打开浏览窗口。
2.当用户选择了一个图片时，检测到一个onChange事件触发ajaxFileUpload（）并显示照片编辑器区域。
3.上传完成后，会显示图像预览。
4.用户通过调用deleteMessageImage（）来删除图片（这也清除了字段并隐藏了照片编辑器）。
5.用户尝试上传另一张图片。
在这一点上，浏览窗口出现，但是当我选择一个图片时，onChange事件不会被触发，所以什么也没有发生...（另外，它不看起来像文件名甚至转移到输入的值字段。）
我在Firefox 23.0.1
这里是HTML：
< a class =im-photo-btnhref =javascript :; onclick =javascript：uploadMessagePicture（）;>< i class =icon-join-photo>< / i>< / a>
< div class =editor-photoareaid =editor-photoareastyle =display：none;>
< input name =image_message_filetype =hiddenid =image_message_filevalue =/>
< div id =image_message_upload>
< input name =image-messagetype =fileid =image-messagestyle =display：none; visibility：hidden; />
<！ - 隐藏它并从照片btn中触发它（需要同时显示：none + visibility：hiden以实现浏览器兼容性） - >
< / div>
< div class =loadingid =image_message_loadingstyle =display：none;>< img alt =<？php echo $ lang [Loading];？> src =lib / immedia / img / ajax-loader.gif/> <？php echo $ lang [Loading];？>< / div>
< div class =previewstyle =display：none; ID = image_message_preview >
<！ - < div>图片预览：< / div>
< div id ='small_message_msg'>< / div>
< img src =''/>
< div class ='btnoptions'>
< a onclick ='javascript：deleteMessageImage（）;'href ='javascript :;'class ='button'title =删除照片>
< span class ='ui-icon ui-icon-closethick smsg'>< / span>删除
< / a>
< / div> - >
< / div>
这是javascript自动上传图片
$（document）.ready（function（）{
$ （＃image-message）。on（'change'，function（）{
$（'＃editor-photoarea'）。show（）;
ajaxFileUploadMessagePicture（）;
} ）;
}）;
$ b $ function uploadMessagePicture（）{
//触发浏览点击
if（$（'＃image_message_file'）。val（）==''）{
只有在没有文件的情况下，让用户上传文件
$（'＃image-message'）。trigger（'click'）;
函数ajaxFileUploadMessagePicture（）{
$（＃msg_error_no_image_message）。hide（）;
var imageName = $（＃image-message）。val（）;
if（imageName！=''）{
$（＃image_message_loading）。show（）;
$（'＃sendBtn'）。attr（'disabled'，'disabled'）;
$ b $ .ajaxFileUpload
（
{
url：siteRegionDir +'lib / immedia / uploadMessagePicture.php'，
secureuri：false，
fileElementId：'image-message'，
dataType：'json'，
成功：函数（数据，状态）
{
updateMessagePicture（data）;
}，
error：function（data，status，e）
{
alert（e）;
}
}
）
} else {
$（＃msg_error_no_image_message）。show（）;
}
返回false;
下面是使用Javascript删除图片并清除字段
函数deleteMessageImage（）{
//删除图片
var file = $（ #image_message_file）VAL（）;
$ b $ if（file！=''）{
$ .post（siteRegionDir +'lib / immedia / deleteMessagePicture.php'，{filename：file}，function（data）{
）clearPictureAttachment（）;
$（'＃editor-photoarea'）。hide（）; //确定它是隐藏的
}，html
）;
} else {
clearPictureAttachment（）;
$（'＃editor-photoarea'）。hide（）; //确认它是隐藏的
$ b $ function clearPictureAttachment（）{
// var control = $（＃image-message）;
$（＃image-message）。attr（'value'，''）;
//control.replaceWith（control = control.clone（true））; //如此重置它，truw =保留绑定事件
$（＃image_message_file）。attr（'value '，''）;
$（＃image_message_loading）。hide（）;
$（＃image_message_upload）。show（）;
$（＃image_message_preview）。hide（）;
$ / code $ / pre
$ b $ p任何帮助都会很棒！谢谢！解决方案感谢编程节奏让我走上正轨。
我所做的是实际上只需在字段上再次加上on（change）调用即可。
所以我只改变了clearPictureAttachment（）函数（在删除图片时调用）：
function clearPictureAttachment（）{
$（＃image-message）。attr（'value'，''）;
$（＃image_message_file）。attr（'value'，''）;
$（＃image_message_loading）。hide（）;
$（＃image_message_upload）。show（）;
$（＃image_message_preview）。hide（）;
//重新启用onchange上传图片
$（＃image-message）。on（'change'，function（）{
$（'＃editor-photoarea'） .show（）;
ajaxFileUploadMessagePicture（）;
}）;
$ / code $ / pre
$ b $ p再次感谢！
I have a picture upload button that automatically uploads the file when selected from the browse window.
Nonetheless, it doesn't work the second time around and that is because the onChange event is not triggered. Why is that so?
Here is a use case:
1. On click of the button, I call uploadMessagePicture(), which opens the browse window.
2. When the user has selected a picture, a onChange event is detected which triggers the ajaxFileUpload() and shows the photo editor area.
3. When the upload is complete, a preview of the image is shown.
4. The user deletes the picture by calling deleteMessageImage() (which also clears the fields and hides the photo editor).
5. The user tries to upload another picture.
At this point, the browse window appears, but when I select a picture, the onChange event is not triggered so nothing happens... (Also, it doesn't seem like the filename is even transfered to the input' value field.)
I'm on Firefox 23.0.1
Here is the HTML:
<a class="im-photo-btn" href="javascript:;" onclick="javascript:uploadMessagePicture();"><i class="icon-join-photo"></i></a>
<div class="editor-photoarea" id="editor-photoarea" style="display:none;">
<input name="image_message_file" type="hidden" id="image_message_file" value="" />
<div id="image_message_upload">
<input name="image-message" type="file" id="image-message" style="display:none; visibility:hidden;" />
<!-- hide it and trigger it from the photo btn (need both display:none + visibility:hiden for browser compatibility) -->
</div>
<div class="loading" id="image_message_loading" style="display:none;"><img alt="<?php echo $lang["Loading"];?>" src="lib/immedia/img/ajax-loader.gif" /> <?php echo $lang["Loading"];?></div>
<div class="preview" style="display:none;" id="image_message_preview">
<!-- <div>Image preview :</div>
<div id='small_message_msg'></div>
<img src='' />
<div class='btnoptions'>
<a onclick='javascript:deleteMessageImage();' href='javascript:;' class='button' title="Delete photo">
<span class='ui-icon ui-icon-closethick smsg'></span>Delete
</a>
</div>-->
</div>
Here is the javascript to automatically upload the picture
$(document).ready(function (){
$("#image-message").on('change', function () {
$('#editor-photoarea').show();
ajaxFileUploadMessagePicture();
});
});
function uploadMessagePicture(){
//trigger the browse click
if($('#image_message_file').val() == ''){
//let the person upload a file only if none are there
$('#image-message').trigger('click');
}
}
function ajaxFileUploadMessagePicture(){
$("#msg_error_no_image_message").hide();
var imageName = $("#image-message").val();
if(imageName != ''){
$("#image_message_loading").show();
$('#sendBtn').attr('disabled', 'disabled');
$.ajaxFileUpload
(
{
url:siteRegionDir+'lib/immedia/uploadMessagePicture.php',
secureuri:false,
fileElementId:'image-message',
dataType: 'json',
success: function (data, status)
{
updateMessagePicture(data);
},
error: function (data, status, e)
{
alert(e);
}
}
)
}else{
$("#msg_error_no_image_message").show();
}
return false;
}
Here is the Javascript to delete the picture and clear the fields
function deleteMessageImage(){
//delete the image
var file = $("#image_message_file").val();
if(file != '') {
$.post(siteRegionDir+'lib/immedia/deleteMessagePicture.php',{filename:file}, function(data) {
clearPictureAttachment();
$('#editor-photoarea').hide();//make sure it is hidden
},"html"
);
}else{
clearPictureAttachment();
$('#editor-photoarea').hide();//make sure it is hidden
}
}
function clearPictureAttachment(){
//var control = $("#image-message");
$("#image-message").attr('value', '');
//control.replaceWith( control = control.clone( true ) );//so it resets it all, truw = keep the bound events
$("#image_message_file").attr('value', '');
$("#image_message_loading").hide();
$("#image_message_upload").show();
$("#image_message_preview").hide();
}
Any help would be great! Thanks!
解决方案 Thanks to codingrhythm for leading me on the right track.
What I did was to actually just add the on("change") call again on the field.
So I only altered the clearPictureAttachment() function (called when deleting a picture) to this:
function clearPictureAttachment(){
$("#image-message").attr('value', '');
$("#image_message_file").attr('value', '');
$("#image_message_loading").hide();
$("#image_message_upload").show();
$("#image_message_preview").hide();
//reenable the onchange to upload a picture
$("#image-message").on('change', function () {
$('#editor-photoarea').show();
ajaxFileUploadMessagePicture();
});
}
Thanks again!
这篇关于输入文件的第二次使用不会再触发变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
