<%@ 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. Hibernate入门详解

    学习Hibernate ,我们首先要知道为什么要学习它?它有什么好处?也就是我们为什么要学习框架技术? 还要知道    什么是Hibernate?    为什么要使用Hibernate?    Hib ...

  2. PHP往mysql数据库中写入中文失败

    该类问题解决办法就是 在建立数据库连接之后,将该连接的编码方式改为中文. 代码如下: $linkID=@mysql_connect("localhost","root&q ...

  3. DLog的使用

    DLog本质上就是个宏替换.DLog具体代码如下: #ifdef DEBUG #define DLog(fmt, ...) NSLog((@"%s [Line %d] " fmt) ...

  4. Laravel环境配置之安装Homestead

    laravel requirements: PHP >= 5.5.9   (机器上yum安装的是5.3.3) OpenSSL PHP Extension PDO PHP Extension Mb ...

  5. Visual Studio 2010扩展让JS与CSS实现折叠

    在Visaul Studio 2010中写js或css代码,缺少像写C#代码时的那种折叠功能,当代码比较多时,就很不方便. 今天发现,已经有VS2010扩展支持这个功能,它就是——JSEnhancem ...

  6. virtual box 中两个虚拟机 、宿主机 三机互通并且能上外网设置

    virtual box 中两个虚拟机 .宿主机 三机互通并且能上外网设置 1:背景:因为需要学习linux,所以需要在虚拟机里装linux系统,测试要么宿主机与虚拟机linux网络实验测试:要么另一台 ...

  7. POJ1265Area

    http://poj.org/problem?id=1265 题意 : 给你一个点阵,上边有很多点连成的多边形,让你求多边形内部的点和边界上的点以及多边形的面积,要注意他每次给出的点并不是点的横纵坐标 ...

  8. 动态加载dll--不占用文件

    Assembly assembly = Assembly.Load(path); 用上面的方法可以动态的加载到dll,但是用这种方法加载到的dll一直到程序运行结束都是占用的,在此期间不能够对此进行升 ...

  9. hdoj 2682 Tree

    Tree Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  10. [SQL Server]一次执行资料夹内的.sql 指令码

    原文:[SQL Server]一次执行资料夹内的.sql 指令码 初始资料库时,我们Developers们会准备很多.sql指令码来建立资料表.检视甚至初始资料,那麽要怎麽一次执行资料夹内的*.sql ...