今天需要做一个头像的预览功能，所以我想到了异步上传文件。

总结几点：

异步上传难点：

文件二进制流如何获取

是否需要设置表单的头，就是content-Type那里。异步，所以无所谓了吧。

其他就差不多了。

直接上demo：

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.  
  12.     <title>My JSP 'index.jsp' starting page</title>
  13.     <meta http-equiv="pragma" content="no-cache">
  14.     <meta http-equiv="cache-control" content="no-cache">
  15.     <meta http-equiv="expires" content="">
  16.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  17.     <meta http-equiv="description" content="This is my page">
  18.     <!--
  19.     <link rel="stylesheet" type="text/css" href="styles.css">
  20.     -->
  21.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery1.8.3.js"></script>
  22.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/Utils.js"></script>
  23.  
  24.     <script type="text/javascript">
  25.  
  26.     $(function(){
  27.         $("#upload").on('click', function() {
  28.                $('#fileToUpload').click();
  29.             });  
  30.  
  31.         //选择文件之后执行上传
  32.         $('#fileToUpload').change(function() {
  33.              var formData = new FormData();//生成空的form对象
  34.                formData.append("myphoto",$("#fileToUpload")[].files[]);//把该文件对象放入formData
  35.             $.ajax({
  36.                 url:g_basePath+"/FileUploadServlet",
  37.                 data:formData,
  38.                 type:"POST",
  39.                 processData:false, //这个和jquery中formData有关，去除会报错。具体没研究
  40.                 contentType:false, //这个和头contentType有关，去除后在后台无法获得上传的二进制流
  41.                 success: function (data) {
  42.                     //把图片替换
  43.                     $("#upload").attr("src", data);
  44.                 }
  45.             });
  46.         });
  47.     });
  48.  
  49.     </script>
  50.  
  51.   </head>
  52.  
  53.   <body>
  54.     <div>
  55.         <div style="width:180px;height:180px;border:solid 1px;">
  56.                         <img id="upload" alt="" style="width: 180px; height: 180px"
  57.     src="${pageContext.request.contextPath }/images/defaultphoto.jpg">
  58.                         <!-- 隐藏file标签 -->
  59.                         <input id="fileToUpload" style="display: none" type="file" name="myphoto">
  60.         </div>
  61.     </div>
  62.   </body>
  63. </html>

上传时文件使用的是FormData对象，有时间去研究。有人看了我的之后研究了希望回馈一份更好的异步文件上传给我哦，原生js的最好也来一份。哈哈，反哺。

ajax异步上传文件FormDate方式，html支持才可使用的更多相关文章

  1. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  2. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

  3. Asp.Net Mvc异步上传文件的方式

    今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax ...

  4. Spring使用ajax异步上传文件

    单文件上传 <!-- 创建文件选择框 --> 文件上传 :<input type="file" id="file" name="fi ...

  5. 使用ajax异步上传文件或图片(配合php)

    //html代码 <form enctype="multipart/form-data" id="upForm"> <input type=& ...

  6. Jquery_异步上传文件多种方式归纳

    1.不用任何插件,利用iframe,将form的taget设为iframe的name,注意设为iframe的id是没用的,跟网上很多说的不太一致 iframe_upload.htm <!DOCT ...

  7. 使用Ajax异步上传文件

    之前上传文件都是用表单form设置post请求和enctype类型: <form id="upload_form"action="" method=&qu ...

  8. Ajax 异步上传文件

    需要引用js jquery.form 前端代码 <form action="/Save" id="mainForm" method="post& ...

  9. ajax异步上传文件之data参数----小哈学js

    下载ajaxFileUpload.js(下载网址:http://fileuploadajax.codeplex.com/downloads/get/20976) 修改ajaxFileUpload.js ...

随机推荐

  1. Sereja and Array-数组操作或者线段树或树状数组

    CodeForces - 315B Sereja and Array Time Limit: 1000MS   Memory Limit: 262144KB   64bit IO Format: %I ...

  2. C#比較对象的相等性

    对于相等的机制全部不同,这取决于比較的是引用类型还是值类型.以下分别介绍引用类型和值类型的相等性. 1.比較引用类型的相等性 System.Object定义了三种不同的方法,来比較对象的相等性:Ref ...

  3. How Many Tables-并查集

    id=19354" target="_blank" style="color:blue; text-decoration:none">HDU - ...

  4. java 中的final

    在编程语言中都有某种方式,告知编译器一块数据是恒定不变的.有两个需求 1. 一个永不改变的编译器常量 2. 一个在运行时被初始化的值,而这个值不会被改变 在Java中,使用final修饰变量实现这两个 ...

  5. 一个数组nums，其中任意两个值等于给定值target，返回这两个值在nums里的位置

    package com.java.tencent; import java.lang.reflect.Array; import java.util.Arrays; import java.util. ...

  6. Oracle JDBC 连接卡死后 Connection Reset解决过程

    https://www.cnblogs.com/pthwang/p/8949445.html

  7. PHP基础函数手记

    PHP常用函数总结(180多个):http://www.jb51.net/article/101179.htm PHP常用函数归类总结[大全]:http://blog.csdn.net/ty_hf/a ...

  8. HDU 5343 MZL's Circle Zhou 后缀自动机+DP

    MZL's Circle Zhou Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...

  9. Linux 命令汇总总结相关

    玩了linux快一年,简单总结下网络相关的命令,具体每个命令的参数可以用到再细看. 1.ifconfig:查询.设置网卡和IP网段等相关参数,包括MTU.2.ifup.ifdown:这两个命令就是一个 ...

  10. special points about git

    1 about "origin/master tracks the remote branch" 1.1 what does tracking mean? after " ...