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

总结几点：

异步上传难点：

文件二进制流如何获取

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

其他就差不多了。

直接上demo：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

    <!--

    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery1.8.3.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath }/js/Utils.js"></script>

    <script type="text/javascript">

    $(function(){

        $("#upload").on('click', function() {

               $('#fileToUpload').click();

            });  

        //选择文件之后执行上传

        $('#fileToUpload').change(function() {

             var formData = new FormData();//生成空的form对象

               formData.append("myphoto",$("#fileToUpload")[].files[]);//把该文件对象放入formData

            $.ajax({

                url:g_basePath+"/FileUploadServlet",

                data:formData,

                type:"POST",

                processData:false, //这个和jquery中formData有关，去除会报错。具体没研究

                contentType:false, //这个和头contentType有关，去除后在后台无法获得上传的二进制流

                success: function (data) {

                    //把图片替换

                    $("#upload").attr("src", data);

                }

            });

        });

    });

    </script>

  </head>

  <body>

    <div>

        <div style="width:180px;height:180px;border:solid 1px;">

                        <img id="upload" alt="" style="width: 180px; height: 180px"

    src="${pageContext.request.contextPath }/images/defaultphoto.jpg">

                        <!-- 隐藏file标签 -->

                        <input id="fileToUpload" style="display: none" type="file" name="myphoto">

        </div>

    </div>

  </body>

</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. 学写jQuery插件开发方法

    jQuery如此流行,各式各样的jQuery插件也是满天飞.你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧!   很多公 ...

  2. 通过a标签（不丢失referrer）打开另一个窗口

    第一页 //这个是显示窗口的方法 function frmshow(arr){ var old; var val =$.trim($("#phone").val()); if (v ...

  3. swoole新手教程01-环境搭建及扩展安装

    写在前面的废话 <swoole源代码分析>已经写了13章,整个swoole的核心架构基本都分析的差点儿相同了.于是心里一直以来想整理swoole的文档并写一份教程的想法就再度浮了出来. 实 ...

  4. chm文件打不开的解决办法

    我今天在网上找了找C++函数库,下载下来一个 .chm 文件,打开之后发现只显示了目录,内容却显示不出来. 显示是这样:右边区域显示不出来. 在网上查了一下发现CHM文件是网上比较多的电子书籍显示格式 ...

  5. 解决mysql数据库乱码问题

    MySQL的SQL语言是用于访问数据库的最常用标准化语言.MySQL软件采用了双授权政策,它分为社区版和商业版,由于其体积小.速 度快.总体拥有成本低,尤其是开放源码这一特点,一般中小型网站的开发都选 ...

  6. 整合Kafka到Spark Streaming——代码示例和挑战

    作者Michael G. Noll是瑞士的一位工程师和研究员,效力于Verisign,是Verisign实验室的大规模数据分析基础设施(基础Hadoop)的技术主管.本文,Michael详细的演示了如 ...

  7. 【selenium+Python WebDriver API】之复选框顺序正选和顺序反选

    from selenium import webdriver from selenium.webdriver.common.by import By import os,time driver = w ...

  8. 用HttpClient模拟HTTP的GET和POST请求（转）

    本文转自:http://blog.csdn.net/xiazdong/article/details/7724349 一.HttpClient介绍   HttpClient是用来模拟HTTP请求的,其 ...

  9. 【Atheros】禁用CSMA之后pktgen发包一分钟后无法发送的问题

    无线网络中各个节点不断地广播信标帧,收到某节点的信标帧之后才知道这个节点存在,知道它的网络配置是怎么样的,才能知道应该怎么和它通信. 那么问题来了,禁用了CSMA之后,发送节点全力发送,那么它会永远占 ...

  10. html 锚点定位

    在html中设置锚点定位我知道的有几种方法.在此和大家分享一下: 1.使用id定位: <a href="#1F" name="1F">锚点1< ...