iframe仿ajax的无刷新图片上传

最新推荐文章于 2021-08-05 18:27:06 发布

原创最新推荐文章于 2021-08-05 18:27:06 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #JSP #Microsoft

UI 专栏收录该内容

122 篇文章

订阅专栏

本文介绍了一种使用iframe实现的无刷新图片上传方法。通过JavaScript进行文件格式验证及上传状态提示，配合预览功能，确保用户体验流畅。上传完成后通过回调函数更新页面内容。

iframe仿ajax的无刷新图片上传

<iframe name="hidden_frame" id="hidden_frame" style='display:none'></iframe>
<tr class="tr2">
<td valign="top" colspan="4" id="msgPic">

<div id="msg"> </div>

<div id="imgView" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:70px;height:50px;">

</div>
</td>
</tr>
<script language="javascript">
//给出提示，上传中
function showmsg(){
if(!validateImg()){
return false;
}
document.getElementById("msg").innerHTML = '文件上传中...';
return true;
}
//给出提示，上传成功，并且将上传的图片名字回写回来
function uploadFinish(imageName){
document.getElementById("msg").innerHTML = '文件上传成功！';
document.getElementById("imageUrlName").value = imageName;
}

//检查图片的格式是否正确
function validateImg(){
var x = document.getElementById("imageUrl");
if(!x || !x.value){
return false;
}
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
return true;
}else{
alert("您选择的似乎不是图像文件。");
return false;
}
}

//兼容在IE6和IE7上预览图片
function preview(){
var x = document.getElementById("imageUrl");
if(!validateImg()){
return;
}
document.getElementById("imgView").filters.item ("DXImageTransform.Microsoft.AlphaImageLoader").src = 'file://localhost/' + x.value;
}
</script>

<form name="imgForm" method="post" action="shareIPCUpload.do?method=uploadFile" enctype="multipart/form-data" target="hidden_frame">
<tr class="tr2">
<td valign="top">
<fmt:message key="er.description" />
<fmt:message key="er.dian" />
</td>
<td colspan="2">
<input type="file" name="imageUrl" id="imageUrl" onchange="preview();">

<input type="submit" value="上传" onclick="return showmsg();">
</td>
</tr>
</form>

上传的action执行完毕后，转向uploadSuccess.jsp页面，该页面代码如下，回调父窗口的JS来提示上传成功，uploadSuccess.jsp全文如下：

<script>
//alert('${fileName}');
parent.uploadFinish('${fileName}','${statusCode}');
</script>

fileName是上传后文件的名字，statusCode是成功与否的标志信息