<%@ 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. JS Number对象

    数字属性 MAX_VALUE MIN_VALUE NEGATIVE_INFINITY POSITIVE_INFINITY NaN prototype constructor 数字方法 toExpone ...

  2. 廖雪峰js教程笔记10 浏览器对象

    JavaScript可以获取浏览器提供的很多对象,并进行操作. window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属 ...

  3. json 入门（1）

    1.JSONObject介绍 JSONObject-lib包是一个beans,collections,maps,Java arrays和xml和JSON互相转换的包. 2.下载jar包 http:// ...

  4. WebGL框架 -- three.js

    http://segmentfault.com/a/1190000002421007 http://www.cnblogs.com/shawn-xie/archive/2012/08/16/26425 ...

  5. hdu2476 String painter(区间dp)

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2476 Problem Description There are two strings ...

  6. coffeeScript学习01

    安装 这里使用node.js npm install -g coffee-script # watch and compile coffee -w --output lib --compile src ...

  7. 关于oracle ORA-28001的解决方法

    今天发现客户的机器上的系统登录不上了,并且提示如下情况: 发现原来Oracle11G的新特性所致, Oracle11G创建用户时缺省密码过期限制是180天(即6个月), 如果超过180天用户密码未做修 ...

  8. 关于dialog置于底层的问题

    我今天开发的一个dialog,引用代码中已有的,发现是居中的 接下来,我要把它置为底部 然后,我的思路就是从dialog的view设置入手,还用了setgravity,最后还是不成功 所以,后来,我休 ...

  9. jqgrid在colModel中多次调用同一个字段值

    Debug: 代码1: { name : 'input', index : 'input', width : 100, align : "center", formatter : ...

  10. pointers on c (day 1,chapter1)

    c语言的优先级 优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右 () 圆括号 (表达式)/函数名(形参表) . 成员选择(对象) 对象.成员名 ...