<%@ 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. Ajax 与文件上传

    一 Ajax篇 1 ajax简介(Asynchronous Javascript And XML) 异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标 ...

  3. 基于 Django的Ajax实现 文件上传

    ---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...

  4. ajax与文件上传

    一.ajax ajax(Asynchronous JavaScript And XML):异步JavaScript和XML,即使用JavaScript语句与服务器进行异步交互,传输的数据为XML(也可 ...

  5. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  6. python django + js 使用ajax进行文件上传并获取上传进度案例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  8. Django学习笔记之Ajax与文件上传

      Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...

  9. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  10. ajax异步文件上传和进度条

    一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

随机推荐

  1. fprintf, fscanf,printf,scanf使用时参数注意

    在利用fprintf函数将数据按格式输出到文件中时,通常需要限定数据的格式,例如: FILE *f=fopen("d:\\1.txt","w+"); int a ...

  2. js实现页面的自动读秒跳转

    <!-- 代码片段A --> <!-- 倒计时跳转 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  3. RDLC的部署(无法找到Microsoft.ReportViewer.ProcessingObjectModel.dll文件)

    CMD命令:C:\Windows\assembly\GAC_MSIL\ rdlc 相比微软的其他产品来说,做得还真是够烂的了,比水晶报表也烂得多. 但不知为何我还是宁可先择 rdlc.并且渐渐上手了. ...

  4. angularjs指令(二)

    最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...

  5. iOS学习05C语言函数

    本次主要是学习和理解函数,函数树状图如下: 1.函数的声明和定义 函数定义的四要素分别为: 返回值类型 :函数的结果值类型,函数不能返回数组. 指定返回类型是void类型说明函数没有返回值. 函数名 ...

  6. 【BZOJ1036】[ZJOI2008]树的统计Count 树链剖分

    [BZOJ1036][ZJOI2008]树的统计Count Description 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.我们将以下面的形式来要求你对这棵树完成一些操作: I. ...

  7. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  8. spring事务配置详解

    一.前言 好几天没有在对spring进行学习了,由于这几天在赶项目,没有什么时间闲下来继续学习,导致spring核心架构详解没有继续下去,在接下来的时间里面,会继续对spring的核心架构在继续进行学 ...

  9. Codeforces Testing Round #10 A. Forgotten Episode

    水题,注意数据范围 #include <iostream> using namespace std; int main(){ long long n,a; cin >> n; ...

  10. ACM 盗梦空间

    盗梦空间 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 <盗梦空间>是一部精彩的影片,在这部电影里,Cobb等人可以进入梦境之中,梦境里的时间会比现实中 ...