本文对如何实现使用Ajax提交"multipart/form"格式的表单数据，已经如何在图片上传之前，在浏览器上进行预览。使用的主要相关技术HTML5的FILE API，XMLHttprequest Level2中对二进制文件上传的支持（通过构建FormData对象进行支持）以及Servlet 3.0支持的Multiconfig注解来支持文件的上传。在Servlet 3.0 规范之前通常使用第三方库如commons-fileupload进行解决文件上传。

  • HTML5 中的 File 对象和FileReader对象

html5中标签<input type="file" id="imageFile" name="imageFile" multiple>可以设置multiple属性，可以选取多个文件，并且对HTML DOM模型提供支持，如var imageFile=document.getElementById("imageFile").files[0]；document.getElementById("imageFile")返回的文件对象数组，这是由于支持multiple属性，因此我们即使没有设置这一属性，也得通过获取数组的第一个元素，才能获取该文件表示的File对象啊。在Jquery中可以var image=$("#imageFile").get(0).files[0];或者var image=$("#imageFile")[0].files[0]来获取对象。

这一File对象我们可以获取其中的文件名，MIME类型，大小等等信息。

通过FileReader对象，可以对File对象进行读取，显示等等。FileReader的读取操作为异步读取，因此我们得通过设置相关的事件处理程序，才能对读取的数据进行处理。

  • 事件处理程序
onabort  当读取操作被中止时调用.
onerror 当读取操作发生错误时调用.
onload  当读取操作成功完成时调用.
onloadend

当读取操作完成时调用,不管是成功还是失败.

该处理程序在onload或者onerror之后调用.
onloadstart  当读取操作将要开始之前调用.
onprogress  在读取数据过程中周期性调用.
  • 方法概述
void abort() 中止该读取操作.在返回时,readyState属性的值为DONE.
void readAsArrayBuffer(in Blob blob)

开始读取指定的Blob对象或File对象中的内容.当读取操作完成时,readyState属性的值会成为DONE，

如果设置了onloadend事件处理程序,则调用.如果设置了onload事件处理程序,则在读取成功后调用.

同时,result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容.
void readAsBinaryString(in Blob blob)

开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,

如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含所读取文件的原始二进制数据.
void readAsDataURL(in Blob blob)

开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,

如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.
void readAsText(in Blob blob, [optional] in DOMString encoding)

开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,

如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个字符串以表示所读取的文件内容.encoding 可选
一个字符串,表示了返回数据所使用的编码.如果不指定,默认为UTF-8.
  • 实现图片预览功能代码如下：由于需要在浏览器显示图像因此采用FileReader的 readAsDataURL接口。
<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<script type="text/javascript" src="js/jquery-1.12.0.js"></script>

<script type="text/javascript" src="js/bootstrap.js"></script>

<link href="css/bootstrap.css" rel="stylesheet">

<title>Insert title here</title>

<script>

    $(document).ready(function() {

        $("#imageFile").change(function() {

            var fileReader = new FileReader();

            fileReader.onload = function(e) {

                $("#previewImage").append("<span class='center-block text-success'>图像预览</span><image class='img-thumbnail' style='max-width:400px;height:auto;' src="+e.target.result+"/>");

            }

            var imageFile = this.files[0];

            fileReader.readAsDataURL(imageFile);

        });

        $("#send")

        .click(

                function() {

                        var xhr=new XMLHttpRequest();

                        xhr.open("post","fileUpload");

                        xhr.onreadystatechange = function() {

                            if (xhr.readyState == 4) {

                                if(xhr.status == 200){

                                alert("图片上传成功");

                            }else{

                                alert("图片上传失败")

                            }

                            }

                        };

                    var imageFile = $("#imageFile")[0].files[0];

                    var username=$("#username").val();

                    var myForm = new FormData();

                    myForm.append("username",username);

                    myForm.append("imageFile", imageFile);

                    xhr.send(myForm);

                });

    });

</script>

</head>

<body>

    <div class="container">

        <div class="panel">

            <div class="panel panel-primary">

                <div class="panel-heading">

                    <h3 class="panel-title">图像上传和预览测试</h3>

                </div>

                <div class="panel-body">

                    <p id="previewImage"></p>

                    <form action="fileUpload" enctype="multipart/form-data"

                        method="post" class="form-inline">

                        <div class="form-group">

                            <label for="username">用户名</label>

                        </div>

                        <div class="form-group">

                            <input type="text" id="username" name="username" />

                        </div>

                        <div class="form-group">

                            <label for="imageFile">上传图片</label>

                        </div>

                        <div class="form-group">

                            <input type="file" id="imageFile" name="imageFile"

                                accept="image/jpeg" />

                        </div>

                        <button type="button" id="send" class="btn btn-primary">上传</button>

                    </form>

                </div>

            </div>

        </div>

    </div>

</body>

</html>
  • 实现Ajax图片上传，对于form数据的提交有成熟的jquery插件jquery.form.js可以实现ajax提交，并且对不支持FormData对象的浏览器进行支持。本文的实现方法仅对支持HTML5中的FormData浏览器使用。

服务端代码实现，在Servlet 3.0 规范中提供了@MultiConfig这一注解对需要处理"multipart/form"数据类型提交的Servlet进行支持，并且在通过HttServletRequest中的getParts()和getPart(String name)获取上传文件；Servlet 3.0之前则需要下载如commons-fileupload的第三方库进行支持，本文使用这一注解，Tomcat 7及以上版本对Servlet 3.0支持。实现代码如下：

@MultipartConfig(location="/", fileSizeThreshold=1024*102,

maxFileSize=1024*1024*5, maxRequestSize=1024*1024*5*5)

@WebServlet(urlPatterns={"/fileUpload"},loadOnStartup=1)

public class FileUpload extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        request.setCharacterEncoding("UTF-8");

        String fileName=request.getParameter("username")+new Date().getTime()+".jpg";

        Part part=request.getPart("imageFile");

        part.write(fileName);

        response.setContentType("application/json;charset=utf-8");

        String s="{\"result\":\"success\"}";

        response.getWriter().print(s);

    }

}
  • 客户端的Ajax上传实现如下，使用FormData进行构建，FormData中的append的方法可以添加二进制和文本数据。二进制数据直接通过获取File对象既可，如：

var formData=new FormData(); formData.append("username",username);formData.append("image",image);

实现代码如下：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<script type="text/javascript" src="js/jquery-1.12.0.js"></script>

<script type="text/javascript" src="js/bootstrap.js"></script>

<link href="css/bootstrap.css" rel="stylesheet">

<title>Insert title here</title>

<script>

    $(document).ready(function() {

        $("#imageFile").change(function() {

            var fileReader = new FileReader();

            fileReader.onload = function(e) {

                $("#previewImage").append("<span class='center-block text-success'>图像预览</span><image class='img-thumbnail' style='max-width:400px;height:auto;' src="+e.target.result+"/>");

            }

            var imageFile = this.files[0];

            fileReader.readAsDataURL(imageFile);

        });

        $("#send")

        .click(

                function() {

                        var xhr=new XMLHttpRequest();

                        xhr.open("post","fileUpload");

                        xhr.onreadystatechange = function() {

                            if (xhr.readyState == 4) {

                                if(xhr.status == 200){

                                alert("图片上传成功");

                            }else{

                                alert("图片上传失败")

                            }

                            }

                        };

                    var imageFile = $("#imageFile")[0].files[0];

                    var username=$("#username").val();

                    var myForm = new FormData();

                    myForm.append("username",username);

                    myForm.append("imageFile", imageFile);

                    xhr.send(myForm);

                });

    });

</script>

</head>

<body>

    <div class="container">

        <div class="panel">

            <div class="panel panel-primary">

                <div class="panel-heading">

                    <h3 class="panel-title">图像上传和预览测试</h3>

                </div>

                <div class="panel-body">

                    <p id="previewImage"></p>

                    <form action="fileUpload" enctype="multipart/form-data"

                        method="post" class="form-inline">

                        <div class="form-group">

                            <label for="username">用户名</label>

                        </div>

                        <div class="form-group">

                            <input type="text" id="username" name="username" />

                        </div>

                        <div class="form-group">

                            <label for="imageFile">上传图片</label>

                        </div>

                        <div class="form-group">

                            <input type="file" id="imageFile" name="imageFile"

                                accept="image/jpeg" />

                        </div>

                        <button type="button" id="send" class="btn btn-primary">上传</button>

                    </form>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

基于HTML5和JSP实现的图片Ajax上传和预览的更多相关文章

  1. 基于HTML5多图片Ajax上传可预览

    html5多图控件<input id="fileImage" type="file" size="30" name="fil ...

  2. JAVA图片批量上传JS-带预览功能

    这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能.直接贴代码吧,都有注释,很好理解. HTML页面 <!DOCTYPE html> <%@ taglib prefix=& ...

  3. ASP.NET MVC图片管理(上传，预览与显示)

    先看看效果(下面gif动画制作有点大,5.71MB): 题外话:上面选择图片来源于Insus.NET的新浪微博:http://weibo.com/104325017 也是昨晚(2015-07-03)I ...

  4. JavaScript 图片的上传前预览（兼容所有浏览器）

    功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点   ● 对于 Chrome.Fire ...

  5. JQ图片文件上传之前预览功能

    1.先准备一个div onchange触发事件 <input  type="file" onchange="preview(this)" >< ...

  6. jquery +ajax 上传加预览

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. 微信小程序实现图片是上传、预览功能

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...

  8. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  9. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

随机推荐

  1. puppet运维配置实列

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABQkAAAGBCAIAAABKMKAEAAAgAElEQVR4nOydeXwU9cH/t2o9WutR+7

  2. mysql繁字体报错,Incorrect string value: '\xE9_' for column 'UserName' at row 1

    mysql 插入繁体字的时候报错,然后网上找了,说是mysql的库设置为character-set = utf8mb4 结果设置还是没效果 搞了好几天都不知道什么原因,然后今天想了想,好像之前有个学长 ...

  3. NOI 1998 免费馅饼

    附题目链接:http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=4901 时间限制(普通/Java ...

  4. 【Apache开源软件基金会项目】

    因为想要继续巩固一下外语,并且扩展下java的知识面,翻译一下Apache软件基金会的各个项目是个不错的选择. 2014-10-19 1 [Apache .NET Ant Libary] .net A ...

  5. Java通过JDBC连接Oracle之后查询结果和在sqlplus查询结果不一样

    问题描述: 在sqlplus 下 orcl数据库中创建一张表后,使用insert语句插入几条数据 然后用java查询数据,发现在终端中输出的结果和在sqlplus中查询结果不一样. 在sqlplus中 ...

  6. 生成N个不相等的随机数

    近期项目中须要生成N个不相等的随机数.实现的时候.赶工期,又有项目中N非常小(0-100)直接谢了一个最直观的方法: public static List<Integer> randomS ...

  7. Android ListFragment实例Demo（自己定义适配器）

    上一篇文章介绍了ListFragment,当中的ListView并没有自己定义适配器,实际上在实际开发中常会用到自己定义适配器,是实现更复杂的列表数据展示. 所以这篇文章添加了自己定义适配器.来进行L ...

  8. Mac OS X 10.7下找不到~/Library/Application Support的解决方案

    28二 最近有台机器升级到了Mac OS X 10.7,Finder的sidebar变了不说,连用户目录下的Library目录也不见了.但是Terminal中是有的,估计是被隐藏了.直接在Finder ...

  9. Java基础知识强化之集合框架笔记70：模拟斗地主洗牌和发牌（ArrayList）

    1. 模拟斗地主洗牌和发牌 分析:     A:创建一个牌盒     B:装牌     C:洗牌     D:发牌     E:看牌 2. 代码实现: package cn.itcast_03; im ...

  10. Android（java）学习笔记160：Framework运行环境之 Android进程产生过程

    1.前面Android(java)学习笔记159提到Dalvik虚拟机启动初始化过程,就下来就是启动zygote进程: zygote进程是所有APK应用进程的父进程:每当执行一个Android应用程序 ...