Jquery File Upload入門
詳細
最近jeesiteフレームワークを使用しているので、アップロード機能が必要で、偶然にもJquery File Uploadプラグイン(以下JFUと略称する)を使用しました.
まずJFUをダウンロードして解凍した後に中はdemoを持って、jquery-ui.htmlというdemoを例にとると、私はテストアップロードを経てアップロード時の進捗バーに明らかな欠陥があることを発見しました.ここで私は彼を隠します.無駄なコンテンツを削除して、demoの一部のCSS/JSリンクが外部のウェブサイトを指していることに注意して、私はそれらをすべてローカルにダウンロードして、“template-download”テンプレートを修正して1つの隠れたinputを追加してファイルidを記録します.コードは次のとおりです.
アップロード開始
アップロード解除
削除
エコーテスト
17.77 KB
Delete
HTML2JS.exe
11.78 KB
Delete
{% 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"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress"style="display:none;"></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="start"disabled>Start</button>
{% } %}
{% if (!i) { %}
<button class="cancel">Cancel</button>
{% } %}
</td>
</tr>
{% } %}
{% 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">
<a href="{%=file.url%}"title="{%=file.name%}"download="{%=file.name%}"{%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
<input type="hidden"name="files"value="{%=file.fileid%}">
</p>
{% if (file.error) { %}
<div><span class="error">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
<button class="delete"data-type="{%=file.deleteType%}"data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>Delete</button>
<input type="checkbox"name="delete"value="1"class="toggle">
</td>
</tr>
{% } %}
最近jeesiteフレームワークを使用しているので、アップロード機能が必要で、偶然にもJquery File Uploadプラグイン(以下JFUと略称する)を使用しました.
まずJFUをダウンロードして解凍した後に中はdemoを持って、jquery-ui.htmlというdemoを例にとると、私はテストアップロードを経てアップロード時の進捗バーに明らかな欠陥があることを発見しました.ここで私は彼を隠します.無駄なコンテンツを削除して、demoの一部のCSS/JSリンクが外部のウェブサイトを指していることに注意して、私はそれらをすべてローカルにダウンロードして、“template-download”テンプレートを修正して1つの隠れたinputを追加してファイルidを記録します.コードは次のとおりです.
ファイルの追加アップロード開始
アップロード解除
削除
エコーテスト
17.77 KB
Delete
HTML2JS.exe
11.78 KB
Delete
{% 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"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress"style="display:none;"></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="start"disabled>Start</button>
{% } %}
{% if (!i) { %}
<button class="cancel">Cancel</button>
{% } %}
</td>
</tr>
{% } %}
{% 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">
<a href="{%=file.url%}"title="{%=file.name%}"download="{%=file.name%}"{%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
<input type="hidden"name="files"value="{%=file.fileid%}">
</p>
{% if (file.error) { %}
<div><span class="error">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
<button class="delete"data-type="{%=file.deleteType%}"data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>Delete</button>
<input type="checkbox"name="delete"value="1"class="toggle">
</td>
</tr>
{% } %}
jqueryを修正する.fileupload-ui.jsのgetFilesFromResponseメソッドは、戻り値をreturn dataに変更しました.result、ここはとても重要です.
最後のservletコードは以下の通りです:
package com.thinkgem.jeesite.JFupload.web;
import java.awt.image.BufferedImage;
import java.io.*;
import java.util.List;
import java.util.UUID;
import javax.imageio.ImageIO;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
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;
import org.imgscalr.Scalr;
import org.json.JSONArray;
import org.json.JSONObject;
public class UploadServlet extends HttpServlet {
// private static final long serialVersionUID = 1L;
private File fileUploadPath;
@Override
public void init(ServletConfig config) {
String path = config.getServletContext().getRealPath("/");
fileUploadPath = new File(path+config.getInitParameter("upload_path"));
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
if (request.getParameter("getfile") != null
&& !request.getParameter("getfile").isEmpty()) {
File file = new File(fileUploadPath,
request.getParameter("getfile"));
if (file.exists()) {
int bytes = 0;
ServletOutputStream op = response.getOutputStream();
response.setContentType(getMimeType(file));
response.setContentLength((int) file.length());
response.setHeader( "Content-Disposition", "inline; filename=\"" + file.getName() + "\"" );
byte[] bbuf = new byte[1024];
DataInputStream in = new DataInputStream(new FileInputStream(file));
while ((in != null) && ((bytes = in.read(bbuf)) != -1)) {
op.write(bbuf, 0, bytes);
}
in.close();
op.flush();
op.close();
}
} else if (request.getParameter("delfile") != null && !request.getParameter("delfile").isEmpty()) {
File file = new File(fileUploadPath, request.getParameter("delfile"));
if (file.exists()) {
file.delete(); // TODO:check and report success
}
} else if (request.getParameter("getthumb") != null && !request.getParameter("getthumb").isEmpty()) {
File file = new File(fileUploadPath, request.getParameter("getthumb"));
if (file.exists()) {
String mimetype = getMimeType(file);
if (mimetype.endsWith("png") || mimetype.endsWith("jpeg") || mimetype.endsWith("gif")) {
BufferedImage im = ImageIO.read(file);
if (im != null) {
BufferedImage thumb = Scalr.resize(im, 75);
ByteArrayOutputStream os = new ByteArrayOutputStream();
if (mimetype.endsWith("png")) {
ImageIO.write(thumb, "PNG" , os);
response.setContentType("image/png");
} else if (mimetype.endsWith("jpeg")) {
ImageIO.write(thumb, "jpg" , os);
response.setContentType("image/jpeg");
} else {
ImageIO.write(thumb, "GIF" , os);
response.setContentType("image/gif");
}
ServletOutputStream srvos = response.getOutputStream();
response.setContentLength(os.size());
response.setHeader( "Content-Disposition", "inline; filename=\"" + file.getName() + "\"" );
os.writeTo(srvos);
srvos.flush();
srvos.close();
}
}
} // TODO: check and report success
} else {
PrintWriter writer = response.getWriter();
writer.write("call POST with multipart form data");
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*
*/
@SuppressWarnings("unchecked")
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
if (!ServletFileUpload.isMultipartContent(request)) {
throw new IllegalArgumentException("Request is not multipart, please 'multipart/form-data' enctype for your form.");
}
ServletFileUpload uploadHandler = new ServletFileUpload(new DiskFileItemFactory());
PrintWriter writer = response.getWriter();
response.setContentType("text/html;charset=utf-8");
JSONArray json = new JSONArray();
try {
List items = uploadHandler.parseRequest(request);
for (FileItem item : items) {
if (!item.isFormField()) {
File file = new File(fileUploadPath, item.getName());
item.write(file);
JSONObject jsono = new JSONObject();
jsono.put("name", item.getName());
jsono.put("size", item.getSize());
jsono.put("url", "upload?getfile=" + item.getName());
jsono.put("thumbnail_url", "upload?getthumb=" + item.getName());
jsono.put("delete_url", "upload?delfile=" + item.getName());
jsono.put("delete_type", "GET");
jsono.put("fileid", UUID.randomUUID().toString());
json.put(jsono);
}
}
} catch (FileUploadException e) {
throw new RuntimeException(e);
} catch (Exception e) {
throw new RuntimeException(e);
} finally {
System.out.println(json.toString());
writer.write(json.toString());
writer.close();
}
}
private String getMimeType(File file) {
String mimetype = "";
if (file.exists()) {
// URLConnection uc = new URL("file://" + file.getAbsolutePath()).openConnection();
// String mimetype = uc.getContentType();
// MimetypesFIleTypeMap gives PNG as application/octet-stream, but it seems so does URLConnection
// have to make dirty workaround
if (getSuffix(file.getName()).equalsIgnoreCase("png")) {
mimetype = "image/png";
} else {
javax.activation.MimetypesFileTypeMap mtMap = new javax.activation.MimetypesFileTypeMap();
mimetype = mtMap.getContentType(file);
}
}
System.out.println("mimetype: " + mimetype);
return mimetype;
}
private String getSuffix(String filename) {
String suffix = "";
int pos = filename.lastIndexOf('.');
if (pos > 0 && pos < filename.length() - 1) {
suffix = filename.substring(pos + 1);
}
System.out.println("suffix: " + suffix);
return suffix;
}
}