<%@ 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. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

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

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

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

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

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

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

  5. ajax对文件上传

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

  6. HTML5+AJAX+WEBAPI 文件上传

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

  7. Python Django缓存,信号,序列化,文件上传,Ajax登录和csrf_token验证

    本节内容 models操作 Django的缓存 请求方式 序列化 Form 配合Ajax实现登录认证 上传文件 Ajax  csrf_token验证方式 1 models操作 单表查询: curd(增 ...

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

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

  9. ajaxFileUpload文件上传

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

随机推荐

  1. AMDJS编译工具

    amdjs-build可以将amdjs标准的js代码编译成原生的js代码,从而在发布时去除多余的模块加载器代码. 比如像这样的代码: define("a/b", ["b& ...

  2. 导入charts开源库到工程里面

    http://blog.csdn.net/zww1984774346/article/details/50608338 http://blog.csdn.net/zww1984774346/artic ...

  3. VS2010 根据模型生成数据库 打开edmx.sql文件时 vs出现无响应的解决方案

    今天在VS2010 sp1+sql server 2008 R2+Win7操作系统下测试ADO.NET 实体数据模型时 ,遇到这样一个问题. 首先建好实体模型,然后"根据模型生成数据库&qu ...

  4. oracle错误(ORA-01691),单个数据文件大小限制问题

    1.问题:数据库从其他库同步一张大表时,出现错误 ERROR at line : ORA-: illegal parameter value in OCI lob function ORA-: pre ...

  5. Android生命周期详细说明

    提供两个关于Activity的生命周期模型图示帮助理解:                                           图1 图2 从图2所示的Activity生命周期不难看出, ...

  6. 九度 题目1437:To Fill or Not to Fill

    题目描述: With highways available, driving a car from Hangzhou to any other city is easy. But since the ...

  7. SharePoint 项目的死法(一)

    SharePoint是Microsoft的一个巨NB的产品, 从可查到的数据来看, 财富500强中已经有超过80%的企业已经使用了SharePoint的不同版本,从项目实施的经验来看, 个人感觉这个数 ...

  8. Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图

      标签: Android百度地图API Key  分类: Android 百度地图开发(2)    最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地 ...

  9. 判断2D平面内某点是否在某个旋转的矩形(OBB)内的算法

    http://stackoverflow.com/questions/7328424/point-in-obb-oriented-bounding-box-algorithm Given a cent ...

  10. spring mvc DispatcherServlet详解之interceptor和filter的区别

    首先我们看一下spring mvc Interceptor的功能及实现: http://wenku.baidu.com/link?url=Mw3GaUhCRMhUFjU8iIDhObQpDcbmmRy ...