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>