1、HTML
======================================测试部分========================================== <img src="${pageContext.request.contextPath}/img/loading.gif" id="loading" style="display: none;"> <table class="tableForm"> <thead> <tr> <th>JQuery Ajax File Upload</th> </tr> </thead> <tbody> <tr> <td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td> </tr> </tbody> <tfoot> <tr> <td><button class="button" id="buttonUpload" onclick="ajaxFileUpload();">Upload</button></td> </tr> </tfoot> </table> <div id="result" style="margin-left:200px"></div> <!-- upload file end --> ================================================================================
2、js
<script src="${pageContext.request.contextPath}/js/jquery.js"></script> <script src="${pageContext.request.contextPath}/js/ajaxfileupload.js"></script> function ajaxFileUpload() { $("#loading").ajaxStart(function(){ $(this).show(); })//开始上传文件时显示一个图片 .ajaxComplete(function(){ $(this).hide(); });//文件上传完成将图片隐藏起来 $.ajaxFileUpload({ url : "../UploadPhoto", //submit to UploadFileServlet secureuri : false, fileElementId : 'fileToUpload', dataType : 'json', //or json xml whatever you like~ success : function(data, status) { alert('success data : ' + data.message); $('#test').html(data.message); if(typeof(data.error) != 'undefined') { if(data.error != '') { //alert(data.error); $('#test').html(data.message); }else { //alert(data.message); $('#test').html(data.message); } } }, error : function(data, status, e) { } }); }
3、servlet
package com.pmis.user.action; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.util.Iterator; import javax.servlet.ServletException; 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.FileItemFactory; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.json.JSONArray; import org.json.JSONObject; import org.slf4j.Logger; import org.slf4j.LoggerFactory; /** * 上传文件 处理servlet */ public class UploadFileServlet extends HttpServlet { private static final long serialVersionUID = 1L; private static Logger logger = LoggerFactory.getLogger(UploadFileServlet.class); /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8"); // 判断提交过来的表单是否为文件上传菜单 request.setCharacterEncoding("utf-8"); response.setContentType("text/html"); // 设置字符编码为UTF-8, 这样支持汉字显示 response.setCharacterEncoding("UTF-8"); boolean isMultipart = ServletFileUpload.isMultipartContent(request); PrintWriter writer = response.getWriter(); JSONArray json = new JSONArray(); String result = ""; if (isMultipart) { // 构造一个文件上传处理对象 FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); Iterator items; try { // 解析表单中提交的所有文件内容 items = upload.parseRequest(request).iterator(); while (items.hasNext()) { FileItem item = (FileItem) items.next(); if (!item.isFormField()) { // 取出上传文件的文件名称 String name = item.getName(); // 取得上传文件以后的存储路径 String fileName = name.substring(name.lastIndexOf('\\') + 1, name.length()); // 上传文件以后的存储路径 String saveDir = this.getServletContext().getRealPath("/upload/"); if (!(new File(saveDir).isDirectory())) { new File(saveDir).mkdir(); } String path = saveDir + File.separatorChar + fileName; result = File.separatorChar + fileName; // 上传文件 File uploaderFile = new File(path); long size = item.getSize(); if ("".equals(path) || size == 0) { result = "{message:'请选择上传文件'}"; return; } String t_name = path.substring(path.lastIndexOf("\\") + 1); // 得到文件的扩展名(无扩展名时将得到全名) String t_ext = t_name.substring(t_name.lastIndexOf(".") + 1).toLowerCase(); if(!"jpg".endsWith(t_ext) && !"jpeg".endsWith(t_ext)) { result = "{message:'请选择上传jpg/jpeg格式图片'}"; return; } item.write(uploaderFile); result = "{message:'ok',url:'upload/" + fileName + "'}"; } } } catch (Exception e) { e.printStackTrace(); } finally { //writer.write(json.toString()); writer.write(result); writer.close(); } } } }
相关推荐
jquery ajax file upload
异步文件上传ajaxFileUpload包,从gitHub下载的,分享一下。大家也可以从gitHub下载:https://github.com/davgothic/AjaxFileUpload
主要为大家分享了jQuery Ajax File Upload实例源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jquery ajax file upload
jquery官方插件ajax file upload使用的实例,用asp.net做的服务器端。具体说明请看这里http://www.cnblogs.com/luq885/archive/2007/11/15/959749.html
支持上传多个文档Ajax 开发实例, Chrome上传多个没问题,但IE上传会出现错误 序列化类型为“System.Collections.Generic.LinkedListNode`1[[ViewDataUploadFilesResult, App_Web_5x24fddx, Version=0.0.0.0, ...
new AjaxUpload(button, { action: 'servlet/import', name: 'newFileName',//更改上传的文件名 data : { 'key1' : "7月份", 'key2' : "8月份", 'key3' : "9月份" }, onSubmit : function...
ajaxupload,c#上传,jquer上传,按钮上传,jquery,上传,ajaxupload单个按钮实现图片上传,不用file上传
项目中会经常用到AJAX无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件。 代码如下 使用方法如下 [removed] $(function () { var button = $('#upload'); new AjaxUpload...
ASP.NET MVC AJAX 文件上传示例代码。 使用 jquery.fileupload + bootstrap 实现,支持多个文件上传。 运行环境:Visual Studio 2012 project, ASP.NET MVC4
jquery实现的ajax文件上传功能 $.ajaxFileUpload ( { url:'doajaxfileupload.php', secureuri:false, fileElementId:'fileToUpload', dataType: 'json', success: function (data, ...
网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大、外观复杂,欲仅取出部分功能来引用,反而不易。因此我参考了两本书上、多个网路上的示例,整合、改写成此一示例,标榜:功能简单 (够用就好)、...
浏览器迫使我们使用文件输入控件(<input type=”file” />)做上传,然而此控件的样式是不能修改...Ajax Upload文件上传插件不会污染任何命名空间,所以它与jQuery,Prototypejs,mootools其他JavaScript库兼容。
jquery ajaxfileupload.js异步上传插件
ajaxFileUpload 博文链接:https://raising.iteye.com/blog/2233668
下面看下ajax实现文件上传 没有使用插件 一、单文件上传 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> [removed][removed] <title></title> </head&...
一键上传文件,免刷新页面即可一键上传,ajax+php+jquery实现的!
其中有些已经无法访问,或许是文件...jQuery插件-文件上传(File upload)Ajax File Upload.jQUploader.Multiple File Upload plugin.jQuery File Style.Styling an input type file.Progress Bar Plugin.jQuery插件-表单
$ git clone https://coding.net/Stiekel/Node.js-Ajax-Upload-File.git 也可以,程序中的前端包都使用的是百度的公开库,后端代码使用npm管理,进入应用目录,执行如下的命令安装: $ npm install 然后执行如下的...