$(function() {
$(".preview").click(function() {
$('#image').wrap('<form action="/index/upload.php" method="post" enctype="multipart/form-data" id="imageform" target="imageupload" />');
$('#imageform').submit();
$('#image').unwrap();
var image = $('#imageupload').filename;
return false;
});
});
<iframe style="display: none;" name="imageupload" id="imageupload"></iframe>
<input type="file" id="image" name="image">
<input type="button" value="Preview" class="preview">
在上面的代码中,将图像提交给服务器后,它会在iframe中创建一个变量,供我检索,其中包含上传图像的文件名。我遇到的问题是,当检索文件名时,jQuery的.submit()函数在表单提交时没有任何回调,因此在图像上传时,我的代码尝试获取文件名时尚不存在。有谁知道我可以解决这个问题?
答案 0 :(得分:1)
我发现iframe本身有一个onload事件,因此我可以在提交到iframe后触发此操作,并且代码会在文件上传后按照需要继续。
$(function() {
$(".preview").click(function() {
$('#image').wrap('<form action="/index/upload.php" method="post" enctype="multipart/form-data" id="imageform" target="imageupload" />');
$('#imageupload').attr('onload', 'preview()');
$('#imageform').submit();
$('#image').unwrap();
return false;
});
});
function preview() {
var image = $('#imageupload').contents().find('#filename').html();
}
<iframe style="display: none;" onload="" name="imageupload" id="imageupload"></iframe>
<input type="file" id="image" name="image">
<input type="button" value="Preview" class="preview">