我尝试通过提交表单在服务器上传文件，并在iframe中返回有关文件上传状态的信息。问题是iframe在文件上传之前加载...
这是我的JS：
var resp;
function doAjaxPost()
{
$.ajax({
Accept: "text / html, application / xhtml + xml, application / xml; q = 0.9, image / webp, * /*;q=0.8",
contentType: "application/x-www-form-urlencoded",
type: "POST",
url: some_uri,
data: some_data,
success: function (response)
{
var recordid = response.substring(response.indexOf('<span id="st_id"></span>') + '<span id="st_id"></span>'.length, response.indexOf('<span id="fin_id"></span>'));
$("#photo").attr("action", "/uploadmyshowcase?table=enmyshowcase&field=enf_photow&id=" + recordid);
$("#photo").submit();
resp = response;
}
} );
function frameCheck(frm)
{
var frmDoc = frm.contentDocument || frm.contentWindow.document;
var field;
if (frmDoc.body.innerHTML && /You successfully uploaded file/.test(frmDoc.body.innerHTML))
{
$('#list').html(resp.substring(resp.indexOf('<span id="st_list"></span>'), resp.indexOf('<span id="fin_list"></span>')));
// Here I replace the part of the current page when file uploaded by placing the <img>-tag with the link on uploaded file.
}
}
这是我的HTML：
<div class="col-md-8" >
<form id="photo" method="POST" action="" target="result" enctype="multipart/form-data" accept-charset="UTF-8">
<input class="noreq input_file" type="file" name="file">
<input class="noreq input_file" style="display:none" type="text" name="name">
</form>
</div>
<iframe class="hidden" id="res" name="result" onload="frameCheck(this)"></iframe>
这是我的上传控制器：
@RequestMapping(value = "/uploadmyshowcase", method = RequestMethod.POST)
public @ResponseBody
String uploadFileController(@RequestParam("name") String name,
@RequestParam("file") MultipartFile file,
@RequestParam(value = "table", required = false) String table,
@RequestParam(value = "field", required = false) String field,
@RequestParam(value = "id", required = false) String Id,
Model model) {
if (!file.isEmpty()) {
try {
byte[] bytes = file.getBytes();
File dir = new File("D:\\NetBeansProjects\\bar\\src\\main\\webapp\\resources\\rcvdFiles");
if (!dir.exists()) {
dir.mkdirs();
}
String[] ext;
if (file.getOriginalFilename().contains(".")) {
ext = file.getOriginalFilename().toString().split("\\.");
if (!"jpg".equals(ext[1]) && !"jpeg".equals(ext[1])) {
return "Wrong format~" + field;
}
} else {
return "Wrong format~" + field;
}
File serverFile = new File(dir.getAbsolutePath() + File.separator + table + "-" + field + "-" + Id + "." + ext[1]);
BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
stream.write(bytes);
stream.close();
String href = "";
switch (field) {
case "enf_photow":
if (new File(dir.getAbsolutePath() + File.separator + table + "-" + field + "-" + Id + "." + ext[1]).exists()) {
href = "/resources/rcvdFiles/" + table + "-" + field + "-" + Id + "." + ext[1];
}
break;
}
return "You successfully uploaded file~" + field + "~" + href + "~" + Id;
} catch (Exception e) {
return "Wrong format~" + field;
}
} else {
return "Wrong format~" + field;
}
结果我看到，frameCheck（）在文件上传到服务器之前调用。我以编程方式放在页面上的IMG是空的，控制台说，找不到资源......有什么问题？
谢谢。
修改
我尝试以编程方式创建iframe，但仍然有相同的结果：（
我修改过的JS：
$.ajax({
Accept: "text / html, application / xhtml + xml, application / xml; q = 0.9, image / webp, * /*;q=0.8",
contentType: "application/x-www-form-urlencoded",
type: "POST",
url: uri,
data: ctrls,
success: function (response) {
var recordid = response.substring(response.indexOf('<span id="st_id"></span>') + '<span id="st_id"></span>'.length, response.indexOf('<span id="fin_id"></span>'));
if(!del)
{
var iframe = document.createElement("iframe");
iframe.name = "result";
iframe.setAttribute('id', "res");
document.body.appendChild(iframe);
$("#photo").attr("action", "/uploadmyshowcase?table=enmyshowcase&field=enf_photow&id=" + recordid);
$("#photo").prop("target", "result");
$("#photo").submit();
resp = response;
$("#res").load(function() {
frameCheck($("#res"));
});
}
}
} );
我修改过的HTML：
<form id="photo" method="POST" action="" enctype="multipart/form-data" accept-charset="UTF-8">
<input class="noreq input_file" type="file" name="file">
<input class="noreq input_file" style="display:none" type="text" name="name">
</form>
答案 0 :(得分：1)
问题是因为iframe的onload不等待ajax完成。这就是你遇到这个问题的原因。您可以将代码更改为在返回ajax响应后调用它。试试看。这应该给你一个要点。
function doAjaxPost()
{
$.ajax({
Accept: "text / html, application / xhtml + xml, application / xml; q = 0.9, image / webp, * /*;q=0.8",
contentType: "application/x-www-form-urlencoded",
type: "POST",
url: some_uri,
data: some_data,
success: function (response)
{
var recordid = response.substring(response.indexOf('<span id="st_id"></span>') + '<span id="st_id"></span>'.length, response.indexOf('<span id="fin_id"></span>'));
$("#photo").attr("action", "/uploadmyshowcase?table=enmyshowcase&field=enf_photow&id=" + recordid);
$("#photo").submit();
resp = response;
// set and call your iframe onload function here. You can also create your iframe here, if just setting your onload does not work.
$("#res").onload = frameCheck($("#res"));
}
} );
从iframe中删除onload。
<div class="col-md-8" >
<form id="photo" method="POST" action="" target="result" enctype="multipart/form-data" accept-charset="UTF-8">
<input class="noreq input_file" type="file" name="file">
<input class="noreq input_file" style="display:none" type="text" name="name">
</form>
</div>
<iframe class="hidden" id="res" name="result" "></iframe>