- 浏览: 15839 次
- 性别:
- 来自: 上海
文章分类
最新评论
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>
相关推荐
随着WEB技术的发展,用户体验成为衡量网站成功与否的关键,今天和大家分享如何在PHP中利用Jquery实现Ajax方式文件上传功能的例子,其中使用到了Jquery插件Ajaxupload,其可以实现单个文件和多文件上传功能。
以下是本人实现ajax上传图片时参考的文章,希望能对大家有帮助。
本文实例讲述了jquery插件ajaxupload实现文件上传操作代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1、创建页面并编写HTML 上传文档: ...
AjaxUpload.rar 文件上传AjaxUpload.rar 文件上传AjaxUpload.rar 文件上传AjaxUpload.rar 文件上传AjaxUpload.rar 文件上传
ajaxupload.js 是一款使用jquery上传文件的js插件,对于简单的文件上传,足够可以应付, 你可以根据自身需要对前后端代码进行补充,也可以将一些...总的来说Jquery插件AjaxUpload实现文件上传功能的应用还是比较容易的。
Ajax Upload文件上传插件允许你上传多个插件而无需刷新页面,可以使用任何的元素来显示文件选择窗口。它可以在所有主流的浏览器下工作,从2.0版本开始,不需要任何库运行。Ajax Upload文件上传插件不会污染任何命名...
ssm整合+ajaxUpload文件上传
利用ajaxupload组件实现的图片上传 1、在部署该工程时,要在tomcat/webapps/对应的工程下建upload/good目录; 2、在该工程中,点击一次上传图片按钮,就执行一次后台操作,然后将图片的路径保存在一个input的隐藏域...
整个案例是使用ajaxupload.js/ajaxfileupload.js实现文件上传,清晰明了,供大家参考,谢谢!!!
详见参考:http://blog.csdn.net/u013934914/article/details/50380935
简单文件上传,没解决很多问题,需要的拿下去自己该。可以做ajax异步文件上传。自己爬坑去,象征性的收一分吧
ajaxfileupload.js 这是个非常好的异步上传图片的插件,来解决form表单上传时要刷新页面的问题。支持多文件上传
文档讲解两种上传方式的不通点,以及上传的源代码示例
new AjaxUpload(button, { action: 'servlet/import', name: 'newFileName',//更改上传的文件名 data : { 'key1' : "7月份", 'key2' : "8月份", 'key3' : "9月份" }, onSubmit : function...
异步上传文件图片js http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html
AjaxUpload.js可以实现在Web应用系统开发中,文件上传和下载功能.使用方法参考: https://blog.csdn.net/liangmengbk/article/details/89333350
AjaxUpLoad.js的使用实现无刷新文件上传,如图。 图1 文件上传前 图2 文件上传后 1、创建页面并编写HTML 上传文档: <span id=doc><input type=text disabled=disabled /> <input type=hidden id=...
AjaxUpload.js 就是一个js文件,里面封装了上传文件的代码,其实就是一个js的框架,利用它来更简单的实现文件的上传
AjaxUpload - 多文件无刷新上传源代码 v1.0