<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <!DOCTYPE HTML>
 <html>
   <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>ajax文件上传的开发</title>
     <meta name="keywords" content="" />
     <meta name="description" content="" />
     <!--
     <link rel="stylesheet" type="text/css" href="styles.css">
     -->
     <style type="text/css">
         #percent{width:600px;height:30px;position:relative;border:1px solid green;}
         #percent #per{height:30px;background:green;position:absolute;left:0;top:0;}
     </style>
   </head>

   <body>
     <form action="upload/uploadAction.jsp?dirpath=pipi" method="post" enctype="multipart/form-data">
         <a href="javascript:;" class="uploadbtn" onclick="openFileDialog()">文件上传</a>
         <input type="file" name="file" id="file" onchange="uploadFile()" style="display: none;" />
         <input type="submit" value="提交" />
     </form>

     <img id="showImg" width="160" height="120" />
     <ul id="showlist">

     </ul>

     <div id="percent">
         <div id="per"></div>
     </div>
     <div id="pnum"></div>
     <script type="text/javascript">
         function openFileDialog(){
             var ie = navigator.appName == "Microsoft Internet Explorer"?true:false;
             if(ie){
                 //如果是ie浏览器
                 document.getElementById("file").click();
             }else{
                 //自定义事件es5中的内容
                 var a = document.createEvent("MouseEvents");
                 a.initEvent("click",true,true);
                 document.getElementById("file").dispatchEvent(a);
             }
         };

         //ajax文件上传  不支持低版本浏览器
         function uploadFile(){
             //拿到文件上传的队列
             var files = document.getElementById("file").files
             var file = files[0];

             var type = file.type;//文件类型
             var name = file.name;//文件名称
             var size = file.size;//文件大小
             if(type.indexOf("image") == -1) {
                 alert("请上传图片类型")
                 return;
             }
             //alert(file.name+"===="+file.size+"==="+file.type);
             showImage(file,function(data){
                 document.getElementById("showImg").src=data;
             })

             var form = new FormData();
             form.append("file",file);

             //如何传输给服务器端,进度条
             var xhr = new XMLHttpRequest();
             //请求服务器
             xhr.open("post", "upload/uploadAction.jsp?dirpath=pipi",true);
             xhr.onreadystatechange = function(){
                 if(this.readyState == 4 && this.status == 200){
                     var data = this.responseText;

                     var jsonData = eval("("+data+")");
                     var html = "";
                     for(var i=0;i<jsonData.length;i++){
                         html += "<li>"+jsonData[i].name+"===="+jsonData[i].sizeString+"====<img src='"+jsonData[i].url+"' width='50' height='50'/>"
                     }
                     console.log(data);
                     document.getElementById("showlist").innerHTML += html;
                 }
             };

             xhr.upload.addEventListener("progress", progressFunction,false);
             xhr.send(form);

         }

         //进度条
         function progressFunction(evt){
         console.log("------");
             var perDom = document.getElementById("per");
             if(evt.lengthComputable){
                 //evt.loaded已经上传了多少
                 //event.total上传文件的总大小
                 var p = evt.loaded / event.total;
                 console.log(p);
                 var pnum = Math.floor(p*100) +"%";
                 perDom.style.width = pnum;
                 document.getElementById("pnum").innerHTML = pnum;
             }
         }

         /*图片预览*/
         function showImage(f,callback){
             var reader = new FileReader();
             reader.onload = (function(theFile) {
                 return function(e) {
                     // img 元素
                     if(callback)callback(e.target.result);
                 };  

             })(f);
             reader.readAsDataURL(f);
         };    

     </script>
   </body>
 </html>
 <%@page import="org.apache.struts2.json.JSONUtil"%>
 <%@page import="com.rui.util.StrUtils"%>
 <%@page import="java.io.File"%>
 <%@page import="org.apache.commons.fileupload.FileItem"%>
 <%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
 <%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
 <%@page import="org.apache.commons.fileupload.FileItemFactory"%>
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%

     /*文件上传的方式*/

     //1.获取文件上传的工厂类
     FileItemFactory factory = new DiskFileItemFactory();
     //2.解析上传文件的工厂
     ServletFileUpload fileUpload = new ServletFileUpload(factory);
     //3.通过解析类解析request对象中的二进制文件
     List<FileItem> fileItems = fileUpload.parseRequest(request);
     //4.读取二进制文件,写入服务器

     //获取服务器的路径getRealPath()获取当前项目所在服务器的根目录
     //D:\tool\dev\apache-tomcat-7.0.56-windows-x86\apache-tomcat-7.0.56\me-webapps\fileUpload\resource
     String dirpath = request.getParameter("dirpath");//
     if(StrUtils.isEmpty(dirpath)) dirpath = "default";
     String fpath = "resource/"+dirpath;
     String path = request.getRealPath(fpath);
     File rootPath = new File(path);
     //如果目录不存在就动态创建
     if(!rootPath.exists()){
         rootPath.mkdirs();
     }

     //如果有文件,就开始进行读和写
     if(fileItems != null && fileItems.size()>0){
         List<Map<String,Object>> maps = new ArrayList<Map<String,Object>>();
         for(FileItem fileItem : fileItems){
             if(!fileItem.isFormField()){//判断是不是file表单
                 //获取文件名称
                 String filename = fileItem.getName();
                 //文件大小
                 long filesize = fileItem.getSize();
                 //获取文件后缀
                 String ext = StrUtils.getExt(filename, true);
                 //重构文件的名称===头像上传的原理就是文件的覆盖
                 String fname = UUID.randomUUID().toString()+ext;
                 File fileName = new File(rootPath,fname);
                 fileItem.write(fileName);

                 Map<String,Object> map = new HashMap<String,Object>();
                 map.put("name", filename);
                 map.put("size", filesize);
                 map.put("sizeString", StrUtils.countFileSize(filesize));
                 map.put("url", fpath+"/"+fname);
                 maps.add(map);

             }
         }
         out.print(JSONUtil.serialize(maps));
     }else {
         out.print("");
         //response.sendRedirect("fail.jsp");
     }
     //5.在服务器创建一个上传的目录
     //6.开始写入
     //7.返回数据

     //response.sendRedirect("success.jsp");

  %>

ajax实现文件上传的更多相关文章

  1. h5 input file ajax实现文件上传

    <input type="file" accept="image/*" height="0" class="file_inp ...

  2. ajax异步文件上传,iframe方式

    不是我写的,我看了他的,思路很明确: 实现思路: 在js脚本中动态创建form,动态创建form中的内容,将文件上传的内容以隐藏域的方式提交过去,然后写好回调等. 感觉思路不难,但是我写不出来,感觉需 ...

  3. JavaScript实现拖拽预览,AJAX小文件上传

    本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件. <div  id="drop_area" style="bord ...

  4. ajax对文件上传

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. HTML5+AJAX+WEBAPI 文件上传

    总体的思路是把文件转换成base64字符串传递给后台,然后再把base64字符串转换成二进制,转成文件. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTM ...

  6. asp.net大文件上传与上传文件进度条问题

    利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...

  7. ajaxFileUpload文件上传

    一.简介 ajaxFileUpload是一种异步的文件上传控件,通过ajax进行文件上传,并获取上传处理结果.在很多时候我们需要使用到文件上传的功能,但是不需要使用那些强大的上传插件.此时就可以使用a ...

  8. springMVC+ajax 文件上传 带进度条

    前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  9. 两种文件上传的实现-Ajax和form+iframe

    前言 话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级简单了.HTML5支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,而且还是纯粹 ...

随机推荐

  1. AutoMapper(一)

    返回总目录 映射前后操作 偶尔有时候,在映射发生之前或之后,你可能需要执行一些自定义的逻辑.这可能是很少见的事情,因为在AutoMapper之外处理这些事情是更明显的.你可以创建一个映射前后的全局操作 ...

  2. 相克军_Oracle体系_随堂笔记004-shared pool

    本章主要阐述SGA中的shared pool. Shared pool { 1.free 2.library cache(缓存sql语句及其执行计划) 3.row cache(数据字典缓存) }   ...

  3. 办公大楼3D指纹门禁系统解决方案

    随着人们对工作.生活的自动化水平也提出了越来越高的要求.以大楼安保对出入大楼的外来人员进行登记放行或以铁锁.钥匙和卡为代表的出入管理方式已无法满足需求. 利用科技的手段,实现办公大楼的安全现代化.管理 ...

  4. vs2010下C++调用lib或dll文件

    注: DLL:表示链接库,包含dll,lib文件: dll: 表示my.dll文件 lib: 表示my.lib文件 C++ 调用.lib的方法: 一: 隐式的加载时链接,有三种方法 1  设置工程的 ...

  5. 做NavMesh相关工作时收集的一些文章

    三角形拾取 http://www.blackpawn.com/texts/pointinpoly/default.htmlCS NavMesh使用手册https://developer.valveso ...

  6. BeanNameAware接口和BeanFactoryAware接口

    迄今为止,所接触到的Bean都是“无知觉”的,就像黑客帝国中机械工厂里面“养殖”的人类,他们虽然能完成一定的功能,但是根本不知道自己在工厂(BeanFactory)中的代号(id),或者自己是在哪个工 ...

  7. ImageMagick资料

    ImageMagick资料 ---------------------------------------------------------------------------- ImageMagi ...

  8. Linux系统/etc/init.d目录

    理解Linux系统/etc/init.d目录和/etc/rc.local脚本 http://blog.csdn.net/acs713/article/details/7322082 Linux文件目录 ...

  9. Integer封装与拆箱

    Integer封装与拆箱 简介: 目录: Integer自动封装的陷阱 Integer自动拆箱机制 Integer自动封装的陷阱 public class IntegerDemo { public s ...

  10. csu 1604 SunnyPig (bfs)

    Description SunnyPig is a pig who is much cleverer than any other pigs in the pigpen. One sunny morn ...