ajax实现文件上传

 <%@ 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实现文件上传的更多相关文章

ajax提交表单、ajax实现文件上传
ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单方式二:使用 ...
Ajax 与文件上传
一 Ajax篇 1 ajax简介(Asynchronous Javascript And XML) 异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标 ...
基于 Django的Ajax实现文件上传
---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...
ajax与文件上传
一.ajax ajax(Asynchronous JavaScript And XML):异步JavaScript和XML,即使用JavaScript语句与服务器进行异步交互,传输的数据为XML(也可 ...
python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾基于对象的跨表查询正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询反向查询:关联属性在A表中,所以B对象找A对象,反向查询一对多: 按字段:xx book ----- ...
python django + js 使用ajax进行文件上传并获取上传进度案例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传拖拽操作实时上传进度自定义上传限制希望能为你的开发工作带来帮助. 1. jQuer ...
Django学习笔记之Ajax与文件上传
Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...
Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
ajax异步文件上传和进度条
一.ajax异步文件上传之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

随机推荐

RabbitMQ常用命令
创建一个用户为mytest,密码为mytest rabbitmqctl add_user mytest mytest 删除一个用户 rabbitmqctl delete_user username ...
Swift3.0语言教程使用编码创建和初始化字符串
Swift3.0语言教程使用编码创建和初始化字符串使用编码创建和初始化字符串创建和初始化字符串除了可以使用上文中提到的方法外,还可以使用init(coder:)方法,此方法一般不常使用,其语法形式 ...
Codeforce 493c
H - Vasya and Basketball Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & ...
Oil Deposits(dfs)
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...
VMware 锐捷 NAT模式的服务自动关闭的解决办法
之前一直搞不定VMware和锐捷的问题,校园网,你懂的. 后来发现,使用NAT模式联网时,锐捷会间隔性地终结windows系统的那个关于NAT联网的服务,你可以在计算机管理 - 服务,找到一个写有NA ...
C#解决从含身份证号码的Excel表格导入数据库的问题
用C#做从Excel表导入SQL数据库时发现从EXCEL导入的身份证号码会变成科学表示方法. 解决这个问题是比较容易的,首先,打开电子表格,选中“身份证号码”一列,右键选择“设置单元格格式”,进入单元 ...
sql跨电脑导数据
启用Ad Hoc Distributed Queries: reconfigure exec sp_configure 'Ad Hoc Distributed Queries',1 reconfigu ...
ScriptManager和ClientScript的区别
ClientScript获取用于管理脚本.注册脚本和向页面添加脚本的ClientScriptManager对象. ScriptManager.RegisterStartupScript方法和Clien ...
C#中==与Equals的区别
1.字符串: string s1 = "test"; string s2 = "test"; , ); object s4 = s3; Console.Writ ...
ACM ICPC 2015 Moscow Subregional Russia, Moscow, Dolgoprudny, October, 18, 2015 K. King’s Rout
K. King's Rout time limit per test 4 seconds memory limit per test 512 megabytes input standard inpu ...

ajax实现文件上传

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

随机推荐

热门专题