Ajax Upload; A file upload script with progress-bar, drag-and-drop .
?
An older ajax upload plugin, which only used iframe for uploads, and was licensed under MIT license is located on github. This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere. Demo To upload a file, click on the button below. Drag-and-drop is supported in FF, Chrome. Progress-bar is supported in FF3.6+, Chrome6+, Safari4+
?
More info please refer: valums.com/ajax-upload/
?
这是一个比较好的插件，前端和后端都有实现。前端javascript ajax，后端支持 java 和 php，其他的语言应该也可以支持，但是需要自己实现文件接收。
?
1。 server端 接收文件的 servlet：
?
/*
* Copyright 2010 Blue Lotus Software, LLC.
* Copyright 2010 John Yeary <jyeary@bluelotussoftware.com>.
* Copyright 2010 Allan O'Driscoll
*
* Dual Licensed MIT and GPL v.2
*
* The MIT License
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
*
* The GNU General Public License (GPL) Version 2, June 1991
* This program is free software; you can redistribute it and/or modify it under the terms of the
* GNU General Public License as published by the Free Software Foundation; version 2 of the License.
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
* See the GNU General Public License for more details.
* You should have received a copy of the GNU General Public License along with this program;
* if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*/
package com.bluelotussoftware.apache.commons.fileupload.example;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.commons.io.IOUtils;
import wavefancy.Utilities;
/**
* Reads an <code>application/octet-stream</code> and writes it to a file.
* @author John Yeary <jyeary@bluelotussoftware.com>
* @author Allan O'Driscoll
* @version 1.0
*/
public class OctetStreamReader extends HttpServlet {
private static final long serialVersionUID = 6748857432950840322L;
private static final String DESTINATION_DIR_PATH = "userImg";
private static String realPath;
/**
* {@inheritDoc}
* @param config
* @throws ServletException
*/
@Override
public void init(ServletConfig config) throws ServletException {
super.init(config);
realPath = getServletContext().getRealPath(DESTINATION_DIR_PATH) + "/";
// realPath = getServletContext().getRealPath(DESTINATION_DIR_PATH);
// realPath = realPath.substring(0, realPath.length()-5)+"/userImg/";
}
/**
* Handles the HTTP <code>POST</code> method.
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException {
// System.out.println("Here!");
PrintWriter writer = null;
InputStream is = null;
FileOutputStream fos = null;
try {
writer = response.getWriter();
} catch (IOException ex) {
log(OctetStreamReader.class.getName() + "has thrown an exception: " + ex.getMessage());
}
String filename = request.getHeader("X-File-Name");
String tempFileName = Long.toString(System.currentTimeMillis()) + filename.substring(filename.lastIndexOf('.'));
//result map
Map<String, String> reMap = new HashMap<String, String>();
try {
is = request.getInputStream();
// System.out.println(realPath);
File tempFile = new File(realPath+tempFileName);
System.out.println(tempFile.getPath());
fos = new FileOutputStream(tempFile);
IOUtils.copy(is, fos);
response.setStatus(HttpServletResponse.SC_OK);
//store temp image file into httpSession, we will crop it according to user's parameters.
HttpSession httpSession = request.getSession(true);
httpSession.setAttribute("tempImg", tempFile);
reMap.put("success", "true");
reMap.put("tempImg", tempFile.getName());
writer.print(Utilities.getRawGson().toJson(reMap));
// writer.print("{success: true}");
} catch (FileNotFoundException ex) {
response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
reMap.put("success", "false");
writer.print(Utilities.getRawGson().toJson(reMap));
// writer.print("{success: false}");
log(OctetStreamReader.class.getName() + "has thrown an exception: " + ex.getMessage());
} catch (IOException ex) {
response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
reMap.put("success", "false");
writer.print(Utilities.getRawGson().toJson(reMap));
// writer.print("{success: false}");
log(OctetStreamReader.class.getName() + "has thrown an exception: " + ex.getMessage());
} finally {
try {
fos.close();
is.close();
} catch (IOException ignored) {
}
}
// System.out.println("Done!");
writer.flush();
writer.close();
}
}
?
2。web.xml 配置：
?
<servlet> <servlet-name>ImgUpload</servlet-name> <servlet-class>com.bluelotussoftware.apache.commons.fileupload.example.OctetStreamReader</servlet-class> </servlet> <servlet-mapping> <servlet-name>ImgUpload</servlet-name> <url-pattern>/imgUpload.do</url-pattern> </servlet-mapping>
?
3。 web 前端调用
?
<head> <!--for file upload--> <script src="javascript/fileUploadClient/fileuploader.js"></script> <link rel="stylesheet" href="javascript/fileUploadClient/fileuploader.css" /> <!--end for file upload--> </head>
?
<head>
<script>
//------------------ for file upload ----------------
function createUploader(){
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader-demo1'),
action: 'imgUpload.do',
debug: false,
allowedExtensions:['jpg','jpeg','png','gif'],
sizeLimit: 5000000, //5m
minSizeLimit: 1000, //1k
onComplete: function(id, fileName, responseJSON){
// alert(responseJSON.tempImg);
$("#target").attr("src","userImg/"+responseJSON.tempImg);
$("#preview").attr("src","userImg/"+responseJSON.tempImg);
$("#stepTwo").css({
display:'block'
});
//fire jcrop
fireJcrop();
}
});
}
// in your app create uploader as soon as the DOM is ready
// don't wait for the window to load
window.onload = createUploader;
//--------------------end for file upload----------------------
</script>
</head>
?
?
?
<body> <div id="file-uploader-demo1" style="margin-left:20px;"> <noscript> <p>Please enable JavaScript to use file uploader.</p> <!-- or put a simple form for upload here --> </noscript> </div> </body>