jquery文件上传例子(两种方式) - 李红的博客 - ITeye技术网站
博客分类：
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&ajaxFileUpload文件上传例子&/title&
&script type="text/javascript" src="&%=baseURL%&/kinth/js/ajaxfileupload.js"&&/script&
&script type="text/javascript"&
var flag=0;
//flag作用：分两种情况提交信息，如果是修改操作，没有修改上传文件，只修改其他字段的信息时点保存也能提交信息
function uploadFile(){
$.ajaxFileUpload({
url:baseURL+ "/fileCatalog.do?method=save",
//需要链接到服务器地址
secureuri:true,
fileElementId:'file',
//文件选择框的id属性
success: function(data, status){
var results = $(data).find('body').html();
var obj = eval("("+results+")");
$("#fileSize").val(obj.fileSize);
$("#fileUrl").val(obj.fileUrl);
$('#fileCatalogForm').submit();
},error: function (data, status, e){
showDialogWithMsg('ideaMsg','提示','文件错误！');
function getFileName(obj)
var pos = -1;
if(obj.value.indexOf("/") & -1){
pos = obj.value.lastIndexOf("/")*1;
}else if(obj.value.indexOf("\\") & -1){
pos = obj.value.lastIndexOf("\\")*1;
var fileName =
obj.value.substring(pos+1);
$("#fileName").val(fileName);
$('.files').text(fileName);
function ev_save(){
if(submitMyForm('fileCatalogForm')){
if(flag==0){
$('#fileCatalogForm').submit();
uploadFile();
function ev_back(){
window.location.href=baseURL+'/fileCatalog.do?method=list';
&html:form styleId="fileCatalogForm" action="/fileCatalog.do?method=save&fileFlag=true" method="post" enctype="application/x-www-form-urlencoded" style="text-align:"&
&td&附件上传：&/td&
&td style="text-align:"
id="fileTd"&
&input type="file" name="file" id="file" onChange="getFileName(this);"
&td colspan="2" class="tdr"&
class=files&
&c:if test="${entity.resourceId != null && entity.resourceId != ''}"&&li& ${entity.fileName}&&上传成功&/li&&/c:if&
&c:if test="${entity.resourceId == null || entity.resourceId == ''}"&
&input type="text" name="fileSize" id="fileSize" &
&input type="hidden" id="fileUrl" name="fileUrl" value="${entity.fileUrl}"
&/html:form&
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&jqueryUploadify文件上传例子&/title&
&script type="text/javascript" src="&%=baseURL %&/kinth/common/js/jquery.validate.js" &&/script&
&!-- 附件上传
&link href="&%=baseURL%&/kinth/common/jqueryUpload/uploadify.css" rel="stylesheet" type="text/css" /&
&script type="text/javascript" src="&%=baseURL%&/kinth/common/jqueryUpload/swfobject.js"&&/script&
&script type="text/javascript" src="&%=baseURL%&/kinth/common/jqueryUpload/jquery.uploadify.v2.0.3.min.js"&&/script&
&script type="text/javascript"&
var flag=0;
$(document).ready(function() {
$("#files").uploadify({
'uploader'
: '&%=baseURL%&/kinth/common/jqueryUpload/uploadify.swf',
: '&%=baseURL%&/fileCatalog.do?method=fileUpload',
'cancelImg'
: '&%=baseURL%&/kinth/common/jqueryUpload/cancel.png',
: 'fileQueue',
'scriptData'
{'resourceId' : $('#resourceId').val()},
'buttonText'
: 'Brower file',
onComplete: function (evt, queueID, fileObj, response, data) {
$('#fileUrl').attr("value",response);
$('&li&&/li&').appendTo('.files').text(fileObj.name+"上传成功");
$('#fileCatalogForm').submit();
onSelect: function(evt,queueID, fileObj){
var filename = fileObj.
$('#fileName').attr("value",filename.substring(0,filename.lastIndexOf(".")));
$('#fileSize').attr("value",fileObj.size);
onError: function(a, b, c, d) {
alert("文件上传失败");
function myuploadifyUpload(){
$('#files').uploadifyUpload();
function ev_save(){
if(submitMyForm('fileCatalogForm')){
if(flag==0){
$('#fileCatalogForm').submit();
myuploadifyUpload();
&html:form styleId="fileCatalogForm" action="/fileCatalog.do?method=save" method="post" enctype="application/x-www-form-urlencoded" style="text-align:"&
&td&附件上传：&/td&
&td style="text-align:" &
&input type="file" name="files" id="files" /&&br /&
${entity.fileName}
&input type="hidden" id="fileUrl" name="fileUrl" value="${entity.fileUrl}" /&
&div id="fileQueue"&&/div&
&ol class=files&&/ol&
&a href="javascript:jQuery('#files').uploadifyClearQueue()"&取消所有上传&/a&
&c:if test="${entity.resourceId == null || entity.resourceId == ''}"&
&input type="text" name="fileSize" id="fileSize" /&
&input type="text" id="fileName" name="fileName" /&
&input type="hidden" id="fileUrl" name="fileUrl" value="${entity.fileUrl}"
&/html:form&
package com.kinth.hddpt.file.
import java.io.F
import java.io.FileNotFoundE
import java.io.FileOutputS
import java.io.IOE
import java.io.InputS
import java.io.OutputS
import java.util.ArrayL
import java.util.C
import java.util.E
import java.util.H
import java.util.L
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import net.sf.json.JSONA
import mons.logging.L
import mons.logging.LogF
import org.apache.struts.action.ActionF
import org.apache.struts.action.ActionF
import org.apache.struts.action.ActionM
import org.apache.struts.upload.FormF
import org.hibernate.criterion.MatchM
import org.hibernate.criterion.O
import org.hibernate.criterion.R
import com.mon.base.search.MyC
import com.mon.base.search.MyCriteriaF
import com.mon.base.service.BaseS
import com.mon.helper.PagerL
import com.mon.helper.WebH
import com.mon.taglib.SplitP
import com.gdcn.bpaf.security.model.LogonVO;
import mon.helper.DictionaryH
import mon.base.action.BaseA
import com.kinth.hddpt.file.action.form.FileCatalogF
import com.kinth.hddpt.file.model.FileC
import com.kinth.hddpt.file.service.FileCatalogS
import com.kinth.hddpt.file.util.MyZTreeN
* description: “文件上传的Struts层请求处理类”
public class FileCatalogAction extends BaseAction&FileCatalog& {
@SuppressWarnings("unused")
private static Log log = LogFactory.getLog(FileCatalogAction.class); // 日志记录
private FileCatalogService fileCatalogS
// 删除记录的同时删除相应文件
public ActionForward fileDelete(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
String[] id = request.getParameterValues("resourceId");
if (id != null && id[0].contains(",")) {
id = id[0].split(",");
String[] fileUrls = new String[id.length];
for (int j = 0; j & id. j++) {
fileUrls[j] = fileCatalogService.findObject(id[j]).getFileUrl();
if (!isEmpty(fileUrls[j])) {
// 如果该文件夹不存在则创建一个uptext文件夹
File fileup = new File(fileUrls[j]);
if (fileup.exists() || fileup != null) {
fileup.delete();
fileCatalogService.deleteObject(id[j]);
setAllActionInfos(request);
return list(mapping, form, request, response);
public ActionForward save(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
String id = request.getParameter("resourceId");
Boolean fileFlag = Boolean.valueOf(request.getParameter("fileFlag"));
if(fileFlag != null && fileFlag == true){
return super.save(mapping, form, request, response);
String fileUrl = this.fileUpload(form, request, id, fileFlag);
response.setContentType("text/html");
response.setCharacterEncoding("GBK");
response.setHeader("Charset", "GBK");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write(fileUrl);
response.getWriter().flush();
@SuppressWarnings("unchecked")
public String fileUpload(ActionForm form,HttpServletRequest request,String id,Boolean fileFlag) throws FileNotFoundException, IOException{
request.setCharacterEncoding("GBK");
String basePath = getServlet().getServletConfig().getServletContext().getRealPath("")+"/";
String filePath = "uploads/"; // 获取项目根路径 ;
/*注释部分对应jquery upload uploadify插件的后台代码,只是还存在编码问题，默认为utf-8
String savePath = getServlet().getServletConfig().getServletContext().getRealPath(""); // 获取项目根路径
savePath = savePath + "\\uploads\\";
//读取上传来的文件信息
Hashtable&String, FormFile& fileHashtable = form.getMultipartRequestHandler().getFileElements();
Enumeration&String& enumeration = fileHashtable.keys();
enumeration.hasMoreElements();
String key = (String) enumeration.nextElement();
FormFile formFile = (FormFile)fileHashtable.get(key);
String filename = formFile.getFileName().trim(); //文件名
filename = new EncodeChange().changeCode(filename);
String filetype = filename.substring(filename.lastIndexOf(".") + 1);//文件类型
savePath = savePath+filetype+"\\";
System.out.println("path:"+savePath);
String realPath = savePath + //真实文件路径
//如果该文件夹不存在则创建一个文件夹
File fileup = new File(savePath);
if(!fileup.exists()||fileup==null){
fileup.mkdirs();
if (!filename.equals("")) {
// 在这里上传文件
InputStream is = formFile.getInputStream();
OutputStream os = new FileOutputStream(realPath);
int bytesRead = 0;
byte[] buffer = new byte[8192];
while ((bytesRead = is.read(buffer, 0, 8192)) != -1) {
os.write(buffer, 0, bytesRead);
os.close();
is.close();
//如果是修改操作，则删除原来的文件
String id = request.getParameter("resourceId");
if (!isEmpty(id)) {
FileCatalog fileCatalog = fileCatalogService.findObject(id);
String fileUrl = fileCatalog.getFileUrl();
if (!isEmpty(fileUrl)) {
File filedel = new File(fileUrl);
if(filedel.exists()||filedel!=null){
filedel.delete();
request.setAttribute("entity", fileCatalog);
response.getWriter().print(realPath);// 向页面端返回结果信息
// 读取上传来的文件信息
Hashtable&String, FormFile& fileHashtable = form.getMultipartRequestHandler().getFileElements();
Enumeration&String& enumeration = fileHashtable.keys();
enumeration.hasMoreElements();
String key = (String) enumeration.nextElement();
FormFile formFile = (FormFile) fileHashtable.get(key);
String filename = formFile.getFileName().trim(); // 文件名
String filetype = filename.substring(filename.lastIndexOf(".") + 1);// 文件类型
Integer fileSize = formFile.getFileSize();
filePath += Calendar.getInstance().get(Calendar.YEAR)+"/"+filetype+"/" ;
String realPath = basePath+filePath+
// 真实文件路径
if (!filename.equals("")) {
// 如果是修改操作，则删除原来的文件
if (!isEmpty(id)) {
FileCatalog fileCatalog = fileCatalogService.findObject(id);
String fileUrl = fileCatalog.getFileUrl();
if (!isEmpty(fileUrl)) {
fileUrl = basePath + fileU
File filedel = new File(fileUrl);
if (filedel.exists() || filedel != null) {
filedel.delete();
request.setAttribute("entity", fileCatalog);
// 如果该文件夹不存在则创建一个文件夹
File fileup = new File(basePath+filePath);
if (!fileup.exists() || fileup == null) {
fileup.mkdirs();
// 在这里上传文件
InputStream is = formFile.getInputStream();
OutputStream os = new FileOutputStream(realPath);
int bytesRead = 0;
byte[] buffer = new byte[8192];
while ((bytesRead = is.read(buffer, 0, 8192)) != -1) {
os.write(buffer, 0, bytesRead);
os.close();
is.close();
filePath +=
String result = "{\"fileName\":\""+filename+"\",\"fileType\":\""+filetype+"\",\"fileSize\":"+fileSize+",\"fileUrl\":\""+filePath+"\"}";
public FileCatalogService getFileCatalogService() {
return fileCatalogS
public void setFileCatalogService(FileCatalogService fileCatalogService) {
this.fileCatalogService = fileCatalogS
package com.kinth.hddpt.file.
import java.io.F
import java.io.IOE
import java.util.I
import java.util.L
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import mons.fileupload.FileI
import mons.fileupload.FileUploadE
import mons.fileupload.disk.DiskFileItemF
import mons.fileupload.servlet.ServletFileU
jqueryUploadify文件上传servlet类,写了此类就可以不用到action中写fileUpload方法了,只是不能把上传的文件保存到数据库中
这种方法记得配置web.xml哦，
&!--附件上传开始--&
&servlet-name&Upload&/servlet-name&
&servlet-class&
com.kinth.hddpt.file.action.UploadController
&/servlet-class&
&/servlet&
&servlet-mapping&
&servlet-name&Upload&/servlet-name&
&url-pattern&/servlet/fileUpload&/url-pattern&
&/servlet-mapping&
&!--附件上传结束--&
public class UploadController extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
String savePath = this.getServletConfig().getServletContext().getRealPath("");
savePath = savePath + "/uploads/resourses/";
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("utf-8");
List fileList =
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
ex.printStackTrace();
Iterator&FileItem& it = fileList.iterator();
String name = "";
String extName = "";
String category = "";
while (it.hasNext()) {
FileItem item = it.next();
if (item.isFormField()) {
if ("category".equals(item.getFieldName())) {
category = item.getString("utf-8");
} else if (!item.isFormField()) {
name = item.getName();
if (name == null || name.trim().equals("")) {
// 扩展名格式：
if (name.lastIndexOf(".") &= 0) {
extName = name.substring(name.lastIndexOf("."));
savePath = savePath
+ category + "/";
File f1 = new File(savePath);
if (!f1.exists()) {
f1.mkdirs();
File saveFile = new File(savePath + name);
item.write(saveFile);
} catch (Exception e) {
e.printStackTrace();
response.getWriter().print(name + " 上传成功");
下载次数: 1437
浏览 133672
浏览: 271462 次
来自: 湖南
show log 后可以在change history lis ...
我是用ssm写的不知道后台该怎么写 能帮帮我吗
很有帮助，谢谢
学习了素人派
如何在java Web项目中开发WebService接口，地址 ...html5获取上传文件信息_web前端吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：25,159贴子：
html5获取上传文件信息收藏
在html4中使用input[type=file]来上传文件，在html5中也是如此，但却比html4丰富了许多。如：&input type=&file& name=&aa& multiple=&multiple& id=&aa& value=&& /&增加了multiple属性，加上以后可以同时上传多个文件。&input type=&file& name=&aa& multiple=&multiple& id=&aa& value=&& /&&input type=&button& name=&btn& id=&btn& value=&123123& /&&script type=&text/javascript&&document.getElementById(&btn&).onclick = function () {
var file = document.getElementById(&aa&).
console.log(file);}&/script&会发现在控制台中打印出了这么多东西： 对，这就是上传文件的信息，所以我们可以很轻松的获取到上传文件的类型和文件名。document.getElementById(&btn&).onclick = function () {
var file = document.getElementById(&aa&).files[0];
console.log(file);
alert('你上传的文件类型是：'+file.type+'，文件名是：'+file.name);}当然还有文件大小和最后修改时间，大家可以利用的都可以利用。上面我上传的是一个文件，如果是多张文件的话就是这样： 它会以数组的方式返回，这样我们处理起来是不是也很简单？for循环一下，就可以搞定了。。。
点亮12星座印记,
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或最近太忙一直没时间认真的写博客（哈哈哈），最近pm提一个需求，移动端需要一个上传图片的功能，允许多选、删除、预览、点击查看大图并可以滑动。虽然听起来很多，但是这个功能在web上实现过啊，使用webuploader妥妥的，然后就拍着胸口答应了下来，并让B同事做。
开发完成后，后端说同一次上传多张图只能发一次请求，纳尼。。我没仔细看过webuploader的API，不知道为什么需要单独进行上传，看了一下请求信息，在支持FormData的浏览器中使用的FormData来模拟form。那既然这样也可以支持多图一起请求啊（如果webuploader支持或者有其他考虑，欢迎大家指出），算了，自己造吧，也就有了这篇随笔。
1.form表单提交
像我这样的小白都知道form表单提交之后要刷新页面，更别说要实现pm提的那些需求了，但是代码还是要上一下的。
&form action="" target="" id="uploadForm" enctype="multipart/form-data"&
　　&input id="file" type="file" name="file"/&
　　&input type="submit" name="submit" id="submit" value="upload" /&
因为我们这里要上传文件，所以enctype的值为multipart/form-data。
2.form+iframe
看到上面的代码，form有一个target的属性，规定在何处打开action，可能的值有
就不一一介绍了，我们最关心的是最后一个值，framename，我们将页面放在iframe里处理就不担心刷新的问题了，然后再设置一个回调就可以处理服务端返回的参数
&form action=""
target="" id="uploadForm" enctype="multipart/form-data"&
&input id="file" type="file" name="file"/&
&input type="submit" name="submit" id="submit" value="upload" /&
&script type="text/javascript"&
var form = $("#uploadForm");
form.on("submit",function(){
var seed = Math.floor(Math.random()*1000),
id = "uploader-iframe" + seed,
callback = "uploader-cb" + seed,
iframe = $("&iframe id='"+id+"' name='"+id+"' style='display:none'&&/iframe&"),
url = form.attr("action");
form.attr("target",id).append(iframe).attr("action",url+"?iframe="+callback);
window[callback]=function(data){
iframe.remove();
form.removeAttr("target");
form.attr("action",url);
window[callback] =
有没有觉得和jsonp的方式有点像，但是这里不需要动态创建script标签来调用，因为iframe本来就是一个页面，只需要服务端返回调用方法和数据在iframe页面就ok了
服务端返回：
&script type="text/javascript"&
window.top.window[callback](data)
callback是我们事前约定好并传给服务器的参数,data为服务器返回的数据。
还有一种拿数据的方法，不通过后端回调
iframe.on("load",function(){
var ifr =$(this).contents() //jq对象document
//ifr = this.contentDocument || this.document//兼容ie
跟后端约定返回数据格式，然后进行操作
form+iframe这种伪异步的提交方式对文件的处理还是无力，不能想删就删，预览图片只有先传给后台，后台再返回一个线上的地址
3.HTML5之FormData、FileReader
当当当。。文章的主角出现
利用FormData模拟表单数据，通过ajax进行提交，FileReader的readAsDataURL方法拿到base64地址来预览（完美，注意兼容性）
form表单初始化FormData提交
&form action=""
target="" id="uploadForm" enctype="multipart/form-data"&
&input id="file" type="file" name="file"/&
&input type="submit" name="submit" id="submit" value="upload" /&
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
processData设置为false。因为data值是FormData对象，不需要对数据做处理。
&form&标签添加enctype="multipart/form-data"属性。
cache设置为false，上传文件不需要缓存。
contentType设置为false。因为是由&form&表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。
上传后服务端通过file来接收文件流。
&通过FormData对象append方法来添加
&div id="uploadForm"&
&input id="file" type="file"/&
&button id="upload" type="button"&upload&/button&
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
FileReader获取DataUrl
&input multiple="multiple" id="file" type="file" name="file"/&
var reader = new FileReader();
reader.onload=function(e){
//e.target.result为$("#file")[0].files[0]的base64地址
reader.readAsDataURL($("#file")[0].files[0])
更多FormData和FileReader方法可以去查看一下API
4.flash实现
flash的实现不在我们讨论的范围，而且浏览器的支持对flash有很大的影响，现在有很多上传组件做了低版本flash的兼容。比如webuploader、uploadify等
&说了这么多，最后还是要回归到需求上来，由于这个需求是在移动端上，我们自然而然就选了第三种实现方式，这里讲一下实现的思路（伪代码）。
var formdata = new FormData(), count = 0, mId = '${model.id}', a = [];
formdata.append("id", mId)
$("#file").on("change",function() {//file触发change时循环files做相应的处理
if ($("#file")[0].files.length & 0) {
for (var i = 0, j = $("#file")[0].files. i & i += 1) {
(function(k) {//按顺序插入预览图片，并在数组中保存对应的files
var reader = new FileReader()
reader.onload = function(e) {//保证预览顺序和files数组顺序一致，方便后面删除file
count += 1;
a.push($("#file")[0].files[k]);
$(".filelist").append("&li&&p class='imgWrap'&&img class='close' src='img/close.png'/&&img id='"
+ $("#file")[0].files[k].name
+ "' class='choose-img' src='"
+ e.target.result
+ "'' /&&/p&&/li&");//预览相关处理
$(".swiper-wrapper").append("&div class='swiper-slide'&&img id='"
+ $("#file")[0].files[k].name
+ "' class='choose-img' src='"
+ e.target.result
+ "'' /&&/div&");//点击查看大图相关处理
reader.readAsDataURL($("#file")[0].files[i]);
$(document).on("click", ".close", function() {//图片删除处理，处理files数组，更新count
var $this = $(this);
a.splice($this.parents("li").index(), 1);
$(".swiper-slide").eq($this.parents("li").index()).remove();//如果考虑复用，这个index可以优化下
count -= 1;
$this.parents("li").remove();
$("#jsUpload").show();
$("#jsUploadBtn").on("click", function() {//上传时，将files数组循环append进FromData进行ajax提交
for (var i = 0, j = a. i & i += 1) {
formdata.append("file", a[i])
type : 'POST',
cache : false,
data : formdata,
processData : false,
contentType : false
}).done(function(data) {
if (data == 'error') {
$(".flie-toast").addClass("hide");
toast("上传失败，请联系管理员！");
} else if (data == 'no') {
$(".flie-toast").addClass("hide");
toast("您没有参与比赛，不允许上传截图");
} else if (data == 'yes') {
$(".flie-toast").addClass("hide");
toast("上传成功");
setTimeout(function() {
window.location.href = "";
$(".flie-toast").addClass("hide");
toast("上传失败，请联系管理员！");
}).fail(function(res) {
虽然FormData对象有一个delete的方法，但是现在浏览器的支持率堪忧啊，所以只有曲线救国了。
个人知识的宽度和广度毕竟有限，如文章有什么疏漏和错误的地方，欢迎大家留言指出。
阅读(...) 评论()