Uploadify上传文件方法

前端技术 2023/09/07 JavaScript

Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。

先给大家展示下效果图：

修改：

报找不到uploadify-cancel.png文件。找到uploadify.css，找到.uploadify-queue-item .cancel a {，修改文件的路径。
好多人都说，在chrome、Firefox上使用uploadify的时候获取不到session导致上传出错。需要手工将session id方法附加参数中。但是我这里并没有这么做，并且在chrome、Firefox上传没问题，不知道为什么，也许是因为我用的最新版的原因吧。

要点：

uploadify的js配置已经比较全面，在实际使用的时候可以适当的删减一些方法和属性。

一般情况下的单文件上传只考虑onSelect、onUploadError和onUploadSuccess即可。

如果是多文件上传，那么在单文件上传的基础上再加上对整个队列的监听onQueueComplete。

开始上传所有文件：$(\'#file_upload\').uploadify(\'upload\', \'*\');

取消上传：$(\'#file_upload\').uploadify(\'cancel\', parm);

parm为空：取消上传第一个文件。

parm为\'*\'：取消所有的上传文件。

parm为file id：取消该file id对应的文件。

修改附加的一些变量：$(\'#file_upload\').uploadify(\"settings\",\"formData\",{\"name1\":\"中文name\",\"parm1\":\"修改后的参数\"});参数为json，如果该json中的某个变量已经有了，那么覆盖该属性，如果没有，那么追加该属性。
服务端设置编码为：upload.setHeaderEncoding(\"UTF-8\");，这样解析的文件名称为正常中文。但是解析的附加变量中文乱码，这里做一次转码（总感觉转码比较low，不知道是哪里配置的不对）。new String(item.getString().getBytes(\"iso8859-1\"),\"utf-8\")

服务端最后返回文件保存路径（这里可以随便定义返回内容）。

步骤：

配置uploadify 

<%@ page language=\"java\" contentType=\"text/html;charset=UTF-8\" pageEncoding=\"UTF-8\"%>
<%String path = request.getContextPath();%>
<%String basePath = request.getScheme()+\"://\"+request.getServerName()+\":\"+request.getServerPort()+path+\"/\";%>
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<base href=\"<%=basePath %>\">
<title></title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"jquery-easyui-1.4.3/themes/default/easyui.css\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"jquery-easyui-1.4.3/themes/icon.css\">
<script type=\"text/javascript\" src=\"jquery-easyui-1.4.3/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"jquery-easyui-1.4.3/jquery.easyui.min.js\"></script>
<script type=\"text/javascript\" src=\"uploadify/uploadify/jquery.uploadify.min.js\"></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"uploadify/uploadify/uploadify.css\" />
</head>
<script>
$(function(){
$(function() {
$(function() {
$(\'#file_upload\').uploadify({
\'uploader\' : \'<%=basePath%>/UploadServlet\',//服务端地址
\'swf\' : \'uploadify/uploadify/uploadify.swf\',
\'buttonImage\' : \'uploadify/uploadify/img/chooseFile.jpg\',//重载按钮图片
\'buttonClass\' : \'some-class\',//重载按钮样式
\'height\':19,//按钮宽度和高度
\'width\':76,
\'queueID\' : \'file_queue\',//显示文件队列的一个div，在页面定义
\'formData\' : {\'parm1\':\'参数1\',\'year\':\'2016\'},//附加参数，可以在upload参数中更改
\'buttonText\':\'选择文件\',//按钮显示文字，如果有图片的话，会被图片挡住
\'fileSizeLimit\':\'1MB\',//文件最大
\'auto\':false,//自动提交
\'fileTypeExts\' : \'*.gif; *.jpg; *.png\',//文件类型
\'fileTypeDesc\' : \'只能上传图片\',//选择文件的时候的提示信息
\'multi\' : true,//多选
\'queueSizeLimit\' : 3,//队列中文件的个数
\'onSelect\' : function(file) {
console.log(file);
alert(\"选择文件：\" + file.name + \"\\n类型=\"+file.type+\"\\n大小=\"+file.size);
if(file.size>1024000){//文件太大，取消上传该文件
alert(\"文件大小超过限制！\");
$(\'#file_upload\').uploadify(\'cancel\',file.id);
}
},
\'onUploadSuccess\' : function(file, data, response) {
alert(\'每个文件上传成功后触发 \' + file.name + \' was successfully uploaded with a response of \' + response + \':\' + data);
},
\'onUploadComplete\' : function(file) {
alert(\'每个文件上传完成，无论对错都触发！ \' + file.name + \' finished processing.\');
},
\'onUploadError\' : function(file, errorCode, errorMsg, errorString) {
alert(\'上传出错 \' + file.name + \' could not be uploaded: \' + errorString);
},
\'onQueueComplete\':function(queueData){
alert(\"队列中的所有文件上传完成后触发。\\n\"+queueData.uploadsSuccessful+\'\\n\'+queueData.uploadsErrored)
},
});
});
});
});
function upload(){
$(\'#file_upload\').uploadify(\"settings\",\"formData\",{\"name1\":\"中文name\",\"parm1\":\"修改后的参数\"});
$(\'#file_upload\').uploadify(\'upload\', \'*\');//上传所有文件
}
function cancel(){
$(\'#file_upload\').uploadify(\'cancel\', \'*\');//取消所有文件
}
function destroy(){
alert(\"取消upload上传，变成原来样式！\");
$(\'#file_upload\').uploadify(\'destroy\');//destory
}
</script>
<body>
<div class=\"easyui-panel\" title=\"说明\" style=\"margin-bottom:15px\">
</div>
<div class=\"easyui-panel\" style=\"text-align:center;margin-bottom:15px\">
<a href=\"javascript:void(0)\" class=\"easyui-linkbutton\" onclick=\"upload()\">开始上传</a>
<a href=\"javascript:void(0)\" class=\"easyui-linkbutton\" onclick=\"cancel()\">取消上传</a>
<a href=\"javascript:void(0)\" class=\"easyui-linkbutton\" onclick=\"destroy()\">destroy</a>
<input type=\"file\" name=\"file_upload\" id=\"file_upload\" />
<div id=\"file_queue\" style=\"width:400px;height:10px;position:absolute;z-index:999\"></div>
</div>
</body>
</html>

服务端

package com.servlet;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* Servlet implementation class UploadServlet
*/
@WebServlet(name=\"UploadServlet\",urlPatterns=\"/UploadServlet\")
public class UploadServlet extends HttpServlet {
private static final long serialVersionUID = -6483558339095298703L;
/**
* @see HttpServlet#HttpServlet()
*/
public UploadServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append(\"Served at: \").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println(\"获取session，可以根据这个session进行一些其他的判断\" + request.getSession().getId());
SimpleDateFormat sdf=new SimpleDateFormat(\"yyyyMMdd\");
String remotePath = File.separator + \"download\" + File.separator + sdf.format(new Date()) + File.separator;
String savePath = remotePath;
File dfile = new File(savePath);
if (!dfile.exists()) {
dfile.mkdirs();
}
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding(\"UTF-8\");
List<FileItem> fileList = null;
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
return;
}
Iterator<FileItem> it = fileList.iterator();
String name = \"\";
String extName = \"\";
while (it.hasNext()) {
FileItem item = it.next();
if (!item.isFormField()) {
name = item.getName();
long size = item.getSize();
String type = item.getContentType();
System.out.println(\"文件=\" + name + \" \" + size + \" \" + type);
if (name == null || name.trim().equals(\"\")) {
continue;
}
// 扩展名格式：
if (name.lastIndexOf(\".\") >= 0) {
extName = name.substring(name.lastIndexOf(\".\"));
}
File file = null;
do {
// 生成文件名：
name = UUID.randomUUID().toString();
file = new File(savePath + name + extName);
} while (file.exists());
File saveFile = new File(savePath + name + extName);
try {
item.write(saveFile);
} catch (Exception e) {
e.printStackTrace();
}
}else if(item.isFormField()){
System.out.println(\"表单内容：\" + item.getFieldName() + \"=\" + new String(item.getString().getBytes(\"iso8859-1\"),\"utf-8\"));
}
}
String requestPath = remotePath + name + extName;
request.getSession().setAttribute(requestPath, requestPath);
response.getWriter().write(savePath + name + extName);
}
}

本文地址：https://www.stayed.cn/item/18685

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案