ajaxfileupload.js 异步上传文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${ctxStatic }/fileupload/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/jquery/ajaxfileupload.js"></script>
<link href="${ctxStatic}/fileupload/uploadify.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript">

function pp(){

$("#form1").submit();
}

function ajaxFileUpload() {
$.ajaxFileUpload({
url: ‘${ctx}/urge-server/caseCenterCtrl/test1.do‘, //后台接收的url
type: ‘post‘,
secureuri: false, //一般设置为false
fileElementId:‘uploadify‘, // 上传文件的id、name属性名
dataType: ‘text‘, //返回值类型,一般设置为json、application/json
success: function(data, status){
var sta = data.split("###");
$("#q_cvdId").val(sta[1]);//存放临时图片的路径
document.getElementById(‘f1‘).src =sta[0];//展示图片的路径
},
error: function(data, status, e){
alert(e);
}
});
return false;
}

</script>
</head>
<body>
<form id="form1" action="${ctx}/urge-server/caseCenterCtrl/test12.do" method="post" enctype="multipart/form-data">
<input type="file" name="uploadify" id="uploadify" onchange="ajaxFileUpload();" />
<!-- <input type="file" name="uploadify1" id="uploadify1" /> -->
<input type="hidden" id="q_cvdId" name="q_cvdId">
<input type="button" onclick="pp();" value="上传"/>
<img id="f1" src="">
</form>
</body>
</html>

-------------------------------------------------------------------------------

@RequestMapping(value="test1")
public void test1( HttpServletRequest request,HttpServletResponse response) throws Exception{
MultipartFile file = null; //初始化file
response.setCharacterEncoding("UTF-8"); //此方法是解决乱码的
PrintWriter out = response.getWriter();
//获取上传的类型
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
for(Map.Entry<String, MultipartFile> entity:fileMap.entrySet()){
file = entity.getValue();
}
String dir = new File(this.getClass().getClassLoader().getResource("/").getPath(), "../..").getCanonicalPath();
String GENERATE_TEMP_DIR = "/zhou";// 临时目录
File CC= new File(dir+GENERATE_TEMP_DIR);
if (!CC.exists()) {//创建文件加判断如果没有则直接创建
CC.mkdirs();
}
SimpleDateFormat timestampDir = new SimpleDateFormat("yyyyMMddHHmmssSSS");//临时时间戳
String date =timestampDir.format(new Date())+".jpg";//给图片重命名防止中文乱码
String pdf_dir=CC+"\\"+date+"";
if (!file.isEmpty()) {
byte[] bytes = file.getBytes();
FileOutputStream fos = new FileOutputStream(pdf_dir); // 上传到写死的上传路径
fos.write(bytes); //写入文件
fos.close(); //关闭流
}
String path=request.getRequestURL().substring(0,request.getRequestURL().indexOf("/welcome"))+"/zhou"+"/"+date;//此路径是tomact 下临时图片路径
System.out.println ("name: "+file.getOriginalFilename()+" size: "+file.getSize()+"上传路径=="+path ); // 打印文件大小和文件名称
out.println(path+"###"+pdf_dir);

}

时间: 2024-10-04 13:42:25

ajaxfileupload.js 异步上传文件的相关文章

利用ajaxfileupload.js异步上传文件

1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="enclosure"> <button id="upClick" >上传</button> 注意这里的input控件的id和name必须一致:这样在后台利用springMVC接受文件的时候能对应起来: 3.JS代码 <script type=&q

使用ajaxfileupload.js异步上传文件到Servlet

前段时间帮同学做的毕业设计..好吧又是帮人做...需要上传文件,在这里使用了ajaxfileupload.js进行异步的上传文件到Servlet  ,后台保存了文件以后通过JSON返回文件路径到前端,好了废话不多说,直接上代码了... 前端页面比较简单 <input maxlength=16 type=file name="pic" id="pic" size=16 />  <input type="button" id=&qu

JS异步上传文件

直接调用Upload(option)方法,即可上传文件,不需要额外的插件辅助,采用原生js编写. /* *异步上传文件 *option参数 **url:上传路径 **data:上传的其他数据{id:"1"} **maxSize:文件最大值(单位M) * img:"#qrimg", **callback:回调函数(可空) **beforeSend:上传前函数(可空) */ function Upload(option) { var fd = new FormData(

关于js异步上传文件

好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件还有别的信息需要交互,跟后端商量后决定文件单独上传,获取到服务器端返回的文件地址在和表单一起提交.这里就需要异步上传文件. 在网上扒了扒相关的内容,发现还真不少,阮一峰老师的这篇文章(文件上传的渐进式增强)就介绍的很具体,下面就谈谈自己在实战中遇到的一些问题的感受吧. 先看看效果,实现了哪些功能 (

Node.js——异步上传文件

前台代码 submit() { var file = this.$refs.fileUpload.files[0]; var formData = new FormData(); formData.append("file", file); formData.append("username", this.username); formData.append("password", this.password); axios.post("

ajaxfileupload.js ajax上传文件(含application/json)

jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); if(ty

使用ajaxfileupload.js实现上传文件功能

<div class="pictureList"> <div class="pictureItem" id="uploadItem"> <div class="pictureDiv"> <span class="commonSprite LAddWhiteBtn" onclick="triggeruploadPicture()"></

struts2 jquery ajaxFileUpload 异步上传文件

一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和struts2框架和好的融合在一起.但是网上的提供的一些ajaxFileUpload.js插件存在一些问题,不能够实现多次点击上传文件,要想再次上传必须重新刷新页面.在网上找了好久才找到真正的解决方案,有些网友给出的解决方案并没有真正的解决问题,不知到什么原因.我的修改: 原文件: var oldElement = $('#' +

使用ajaxfileupload.js文件异步上传文件

在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script src="