a simple example of jQuery File Upload

jQuery File Upload is a html5/javascript file upload script. Here is a simple example:

shotcut:

飞信截图20150130095201

1.client side(jsp)

<%@ page language=”java” contentType=”text/html; charset=UTF-8″ pageEncoding=”UTF-8″%>
<%@ taglib uri=”http://java.sun.com/jstl/core_rt&#8221; prefix=”c”%>
<%
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>
<base href=”<%=basePath%>”>

<title>jQuery File Upload</title>

<link rel=”stylesheet” href=”<c:url value=”/js/jQueryFileUpload/css/bootstrap.min.css”/>” type=”text/css”></link>

<link rel=”stylesheet” href=”<c:url value=”/js/jQueryFileUpload/css/jquery.fileupload.css”/>” type=”text/css”></link>
<link rel=”stylesheet” href=”<c:url value=”/js/jQueryFileUpload/css/jquery.fileupload-ui.css”/>” type=”text/css”></link>

<link href=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/demo.css”/>” rel=”stylesheet” type=”text/css” />
<link href=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/themes/default/easyui.css”/>” rel=”stylesheet” type=”text/css” />
<link href=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/themes/icon.css”/>” rel=”stylesheet” type=”text/css” />

<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/jquery-1.9.1.min.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/js/vendor/jquery.ui.widget.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/tmpl.min.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/load-image.all.min.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/canvas-to-blob.min.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/jquery.blueimp-gallery.min.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/js/jquery.iframe-transport.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/js/jquery.fileupload.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/js/jquery.fileupload-process.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/js/jquery.fileupload-image.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/js/jquery.fileupload-audio.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/js/jquery.fileupload-video.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/js/jquery.fileupload-validate.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/js/jQueryFileUpload/js/jquery.fileupload-ui.js”/>”></script>
<script src=”<c:url value=”/nnmis/view/ddrz_xhgz/easyui/jquery.easyui.min.js”/>”></script>
<script src=”<c:url value=”/tg/commons/easyui/locale/easyui-lang-zh_CN.js”/>”></script>
<script type=”text/javascript”>
$(function () {
var strdate = new Date();
var stryear = strdate.getFullYear();
var strmonth = strdate.getMonth() + 1;
var strday = strdate.getDate();
var strhour = strdate.getHours();
var strminute = strdate.getMinutes();
var strsecond = strdate.getSeconds();
var upltime = stryear+’-‘+strmonth+’-‘+strday+’ ‘+strhour+’:’+strminute+’:’+strsecond;
$(‘#formdate’).datetimebox(‘setValue’,upltime);

$(‘#fileupload’).fileupload();
$(‘#fileupload’).fileupload(
‘option’,{
singleFileUploads:false,
formData:{pubdate:$(‘#formdate’).datetimebox(‘getValue’)}
//maxFileSize:10,
//done:function(e,data){
// alert(data._response.result.message);
//}
}
);
});
</script>
</head>

<body>
<div class=”container”>
<form id=”fileupload” action=”<c:url value=’/nnmis/view/yjzh/testYjyaQuery.tg’/>” method=”POST” enctype=”multipart/form-data”>
<table>
<tr>
<td>日期:</td>
<td><input id=”formdate” name=”model.pubdate” class=”easyui-datetimebox” style=”width:180px”></input></td>
</tr>
<tr>
<td valign=”top”>文件:</td>
<td>
<div class=”row fileupload-buttonbar”>
<div class=”col-lg-7″>
<!– The fileinput-button span is used to style the file input field as button –>
<span class=”btn btn-success fileinput-button”>
<i class=”icon-plus icon-white”></i>
<span>添加</span>
<input type=”file” name=”files” multiple>
</span>
<button type=”submit” class=”btn btn-primary start”>
<i class=”icon-upload icon-white”></i>
<span>开始上传</span>
</button>
<button type=”reset” class=”btn btn-warning cancel”>
<i class=”icon-ban-circle icon-white”></i>
<span>取消上传</span>
</button>
<button type=”button” class=”btn btn-danger delete”>
<i class=”icon-trash icon-white”></i>
<span>删除</span>
</button>
<input type=”checkbox” class=”toggle”>
<!– The global file processing state –>
<span class=”fileupload-process”></span>
</div>
<!– The global progress state –>
<div class=”col-lg-5 fileupload-progress fade”>
<!– The global progress bar –>
<div class=”progress progress-striped active” role=”progressbar” aria-valuemin=”0″ aria-valuemax=”100″>
<div class=”progress-bar progress-bar-success” style=”width:0%;”></div>
</div>
<!– The extended global progress state –>
<div class=”progress-extended”>&nbsp;</div>
</div>
</div>
</td>
</tr>
</table>
<!– The table listing the files available for upload/download –>
<table role=”presentation” class=”table table-striped”><tbody class=”files”></tbody></table>
</form>
</div>
</body>
</html>

<!– The template to display files available for upload –>
<script id=”template-upload” type=”text/x-tmpl”>
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class=”template-upload fade”>
<td>
<span class=”preview”></span>
</td>
<td>
<p class=”name”>{%=file.name%}</p>
<strong class=”error text-danger”></strong>
</td>
<td>
<p class=”size”>Processing…</p>
<div class=”progress progress-striped active” role=”progressbar” aria-valuemin=”0″ aria-valuemax=”100″ aria-valuenow=”0″><div class=”progress-bar progress-bar-success” style=”width:0%;”></div></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class=”btn btn-primary start” disabled>
<i class=”icon-upload icon-white”></i>
<span>上传</span>
</button>
{% } %}
{% if (!i) { %}
<button class=”btn btn-warning cancel”>
<i class=”icon-ban-circle icon-white”></i>
<span>取消</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<!– The template to display files available for download –>
<script id=”template-download” type=”text/x-tmpl”>
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class=”template-download fade”>
<td>
<span class=”preview”>
{% if (file.thumbnailUrl) { %}
<a href=”{%=file.url%}” title=”{%=file.name%}” download=”{%=file.name%}” data-gallery><img src=”{%=file.thumbnailUrl%}”></a>
{% } %}
</span>
</td>
<td>
<p class=”name”>
{% if (file.url) { %}
<a href=”{%=file.url%}” title=”{%=file.name%}” download=”{%=file.name%}” {%=file.thumbnailUrl?’data-gallery’:”%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class=”label label-danger”>Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class=”size”>{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<button class=”btn btn-danger delete” data-type=”{%=file.deleteType%}” data-url=”{%=file.deleteUrl%}”{% if (file.deleteWithCredentials) { %} data-xhr-fields='{“withCredentials”:true}'{% } %}>
<i class=”icon-trash icon-white”></i>
<span>删除</span>
</button>
<input type=”checkbox” name=”delete” value=”1″ class=”toggle”>
{% } else { %}
<button class=”btn btn-warning cancel”>
<i class=”icon-ban-circle icon-white”></i>
<span>取消</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>

2.server side(java)

public void test(){
try {
System.out.println(“test….”);
String serverDir = ServletActionContext.getServletContext().getRealPath(“/”);
if (!”\\”.equals(serverDir.substring(serverDir.length() – 1))) {
serverDir = serverDir + “\\”;
}
JsonArray jArray = new JsonArray();
if (files != null) {
String origin = “”;
String format = “”;
String savename = “”;
String savePath = “”;
File ofile = null;
for (int i = 0; i < files.size(); i++) {
JsonObject jObject = new JsonObject();
jObject.addProperty(“name”, filesFileName.get(i));
jObject.addProperty(“size”, 1);
jObject.addProperty(“url”, “http://google.com&#8221;);
jObject.addProperty(“thumbnail_url”, “http://google.com&#8221;);
jObject.addProperty(“delete_url”, “http://google.com&#8221;);
jObject.addProperty(“delete_type”, “GET”);
jArray.add(jObject);
System.out.println(filesFileName.get(i));
}
}
outJsonPlainString(response, “{\”files\”:” + jArray.toString() + “}”);
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
}

//reference:

official site:https://github.com/blueimp/jQuery-File-Upload

定制jQuery File Upload为微博式单文件上传

http://avnpc.com/pages/single-file-upload-component-by-jquery-file-upload

适用于各浏览器支持图片预览,无刷新异步批量上传js插件(2)

http://blog.csdn.net/sq111433/article/details/16872403

返回json

https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler

This entry was posted in Computer, Java, javascript. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s