jquery.fileupload使用例子java

2024-10-13 04:25:05

1、需要的css样式和js文件

2、jsp页面信息如下，整个页面信息<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8" import="java.io.*"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML><html><head><meta charset="utf-8"><metacontent="initial-scale=1.0,user-scalable=no, minimum-scale=1,maximum-scale=1,width=device-width"name="viewport"><link rel="stylesheet" href="css/font-icons.css"><link rel="stylesheet" href="css/global.css?t=10"><script type="text/javascript" src="js/zepto.min.js"></script><script type="text/javascript" src="js/globe.js?t=10"></script><title>上传图片</title><link rel="stylesheet" href="css/order.css?t=1"><link rel="stylesheet" href="css/list.css"><script type="text/javascript" src="js/login.js"></script><link rel="stylesheet" href="uploadimg/css/bootstrap.min.css"><link rel="stylesheet" href="uploadimg/css/jquery.fileupload.css"></head><body><div id="wrapper5"><div id="scroller"><script type="text/javascript" src="js/header.js"></script><a name="top" id="top"></a><div></div></div></div><div id="uploadFileIOS"><span class="btn btn-success fileinput-button"> <span>文件上传</span> <inputid="fileupload" type="file" name="file" multiple> </span><div style="height: 30px;"></div><div id="files"></div></div><script src="js/jquery-1.10.1.min.js"></script><script src="uploadimg/js/jquery.ui.widget.js"></script><script src="uploadimg/js/load-image.all.min.js"></script><script src="uploadimg/js/bootstrap.min.js"></script><script src="uploadimg/js/jquery.iframe-transport.js"></script><script src="uploadimg/js/jquery.fileupload.js"></script><script src="uploadimg/js/jquery.fileupload-process.js"></script><script src="uploadimg/js/jquery.fileupload-image.js"></script><script src="uploadimg/js/jquery.fileupload-audio.js"></script><script src="uploadimg/js/jquery.fileupload-video.js"></script><script src="uploadimg/js/jquery.fileupload-validate.js"></script><script>/*global window, $ */$(function() {'use strict';var url = window.location.hostname == 'blueimp.github.io' ? '//jquery-file-upload.appspot.com/': 'user.action?methods=editimg', uploadButton = $('<button/>').addClass('btn btn-primary').prop('disabled', true).text('Processing...').on('click', function() {var $this = $(this), data = $this.data();$this.off('click').text('正在上传').on('click', function() {$this.remove();data.abort();});data.submit().always(function() {$this.remove();});});$('#fileupload').fileupload({url : url,dataType : 'json',autoUpload : false,acceptFileTypes : /(\.|\/)(gif|jpe?g|png)$/i,maxFileSize : 5000000, // 5 MBdisableImageResize : /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),previewMaxWidth : 100,previewMaxHeight : 100,previewCrop : true}).on('fileuploadadd',function(e, data) {data.context = $('<div/>').appendTo('#files');$.each(data.files, function(index, file) {var node = $('<p/>').append($('<span/>').text(file.name));if (!index) {node.append('<br>').append(uploadButton.clone(true).data(data));}node.appendTo(data.context);});}).on('fileuploadprocessalways',function(e, data) {var index = data.index, file = data.files[index], node = $(data.context.children()[index]);if (file.preview) {node.prepend('<br>').prepend(file.preview);}if (file.error) {node.append('<br>').append($('<span/>').text(file.error));}if (index + 1 === data.files.length) {data.context.find('button').text('上传').prop('disabled', !!data.files.error);}}).on('fileuploadprogressall', function(e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .progress-bar').css('width', progress + '%');}).on('fileuploaddone',function(e, data) {var result = data.result.code;if(result=='1'){globe.lvToast(false, "图像上传成功!", LT_LOADING_CLOSE);setTimeout(function() {//window.location.href = "index.action";}, 2000);}else{globe.lvToast(false, data.msg, LT_LOADING_CLOSE);}}).on('fileuploadfail',function(e, data) {globe.lvToast(false, '头像上传失败', LT_LOADING_CLOSE);}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');});</script></body></html>

3、这里特别注意文件名称，容易出错的地方

4、后台处理上传图片的方法，使用的是struts2处理

5、对应前端的文件名name="file"

6、struts2已经处理了请求，我们之间用茧盯璜阝就可以了public String saveattach() { try { BufferedImage bi = I罪焐芡拂mageIO.read(file); if (bi == null) { return "0"; } } catch (IOException e) { return "0"; } String realpath = ServletActionContext.getServletContext().getRealPath("/images/"); if (!new File(realpath).exists()) { new File(realpath).mkdir(); } String[] typechoose = fileFileName.split("\\."); int ichoose = typechoose.length; String type = ichoose > 1 ? typechoose[ichoose - 1] : ""; if (type.toLowerCase().equals("jpg") || type.toLowerCase().equals("gif") || type.toLowerCase().equals("jpeg") || type.toLowerCase().equals("png")) { SimpleDateFormat smat = new SimpleDateFormat("yyyyMMddHHmmss"); String newfilname = smat.format(new Date()) + "." + type; String path = realpath + "/" + newfilname; FileUtil.saveFile(path, file); return "/images/touxiang/"+newfilname; } else { return "0"; } }

7、其中saveFile方法代码如下public 衡痕贤伎static void saveFile(String savePath, File up造婷用痃load) { try { InputStream in = null; OutputStream out = null; in = new FileInputStream(upload); out = new FileOutputStream(savePath); int readed = 0; byte[] buffer = new byte[1024]; while ((readed = in.read(buffer, 0, 1024)) != -1) { out.write(buffer, 0, readed); } out.flush(); out.close(); in.close(); } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } }

8、实现效果如下