利用iframe 异步文件上传
来源:互联网 发布:word朗读软件 编辑:程序博客网 时间:2024/06/05 03:07
最近在项目中用到了文件上传功能 ,目前来说主流的上传控件很多uploadify webUploader等
我们在正常做文件上传功能时,由于ajax不支持设置enctype ajax传递的类型为text(String或者JSON) 所以我们只能通过插件flash 或者 iframe
进行类似功能实现,我在最近的项目中使用了iframe来实现该功能,话不多说上货:
jsp 部分:
<form id="formImg" action="/business/Information/upload" enctype="multipart/form-data" method="post" target="hidden_frame">
<span>选择要上传的封面:</span>
<input id="attachmentsId" type="file" name='file' width="90%" />
<input type="button" value="上传" name="import" style="width:80px;height:20px" onclick="uploadImg()">
<img id="pic" style='width:100px; height=100px' src='' />
</form>
</div>
<iframe style="display:none" name='hidden_frame' id="hidden_frame" onload="callback()"></iframe>
1.建立一个iframe 然后可以通过设置irame的宽高把这个iframe 隐藏掉
2.把form的target属性设置为iframe id 即将form表单提交到这个iframe里
3.编写js方法
js:
function uploadImg()
{
var names=$("#attachmentsId").val().split(".");
if(names[1]!="gif"&&names[1]!="GIF"&&names[1]!="jpg"&&names[1]!="JPG"&&names[1]!="png"&&names[1]!="PNG")
{
alert("图片必须为gif,jpg,png格式");
return;
}
$("#formImg").submit();
}
function callback()
{
var body = $(window.frames['hidden_frame'].document.body);
var info = body.context.textContent;
if(info==""){
return;
}else{
var msg = info.split(";")[0];
if(msg=="上传成功"){
$("#pic").attr("src",info.split(";")[1]);
$("#infromationPicId").val(info.split(";")[1]);
}
alert(msg);
}
}
最后后台controller方法 (项目使用的springmvc 其他框架自行改写)
@RequestMapping(value="/upload",method=RequestMethod.POST,produces="application/json;charset=UTF-8")
public String upload(MultipartFile file,HttpServletRequest request,HttpServletResponse response){
try {
//System.out.println(uploadPath);
String filename = file.getOriginalFilename();
long _lTime = System.nanoTime();
String _ext = filename.substring(filename.lastIndexOf("."));
filename = _lTime + _ext;
FileUtils.writeByteArrayToFile(new File(uploadPath,filename), file.getBytes());
request.getSession().setAttribute("pic", "/toucuzhongxin.ccpit.org.upload"+"/"+filename);
return "上传成功;/toucuzhongxin.ccpit.org.upload"+"/"+filename;
} catch (IOException e) {
e.printStackTrace();
return "上传失败";
}
}
- 利用iframe 异步文件上传
- Iframe仿Ajax异步上传文件(图片)
- iframe模拟ajax异步请求,上传文件
- php之表单文件iframe异步上传
- 使用iframe伪装异步上传文件
- php之表单文件iframe异步上传
- form配合iframe实现文件异步上传
- 利用iframe来实现ajax文件上传
- 利用iframe实现伪ajax上传文件
- 异步请求之同域名异步文件上传iframe标签
- 异步请求之跨域名异步文件上传iframe标签
- ajax+iframe异步上传
- Iframe+js 异步上传
- Iframe 异步上传demo
- HTML5 postMessage+iframe实现文件跨域异步上传
- PHP用iframe实现文件异步上传(无刷新)
- 小技巧:onchange事件+iframe 模拟异步文件上传
- 利用jquery.form实现异步上传文件
- 关于友盟的错误统计
- GDB学习总结
- Android Realm数据库完美解析
- 泛型+反射 List<任意类型>序列化+反序列化
- 180 windows下批量删除bat脚本
- 利用iframe 异步文件上传
- Cocos Creator 控制面板
- Arrays.asList
- MYSQL C API 入门教程
- 计算checbox选中值
- 为什么选择$.getScript()?
- 文章标题
- java中compareTo和compare方法之比较
- window.opener方法的使用 刷新父页面