基于 jQuery 的图片自动上传插件

最新推荐文章于 2024-08-11 18:40:36 发布

Hinbo

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： javascript jquery 程序员插件

本文链接：https://blog.csdn.net/batter_hwb/article/details/52225478

版权

前段时间一直在写图片自动提交上传的 JS 插件，该插件能够兼容低版本的 IE 浏览器，前几天开发完成并提交了，今天就将这几天的学习做一个总结。
在此之前，先说明下该插件使用流程，该插件是基于 jQuery 开发的，所以我们在使用之前需要引用 jQuery，该插件的作用是能够实现前台只通过引入一个标签就能实现图片选择即时上传功能，自动将数据提交到后台，让我们通过后台代码来保存前台传入的图片，并返回响应数据。

1. 目的

解决前端在实现图片上传的功能时编码过于繁琐的问题，提供给使用者一个方便快捷的图片即时上传插件。

2. 实现的基本原理

在针对图片设置预览的问题上，对于高版本的支持 HTML5 的浏览器直接使用 FileReader 对象的
readAsDataURL方法来读取图像文件。该方法可以将读取到的文件编码成 Data URL，从而不需要再额外发出一个 HTTP
请求到服务器端。而对于低版本的 IE 浏览器不支持 HTML5
的问题则直接使用滤镜DXImageTransform.Microsoft.AlphaImageLoader来作降级处理。
在针对图片的上传服务端的问题上，对于高版本的支持 FormData 的浏览器直接使用 XMLHttpRequest对象去向服务器端发送图片数据，启动和服务器端的交互，并从服务器端获取到我们想要的响应数据，达到异步上传的目的。对于不支持 FormData的较低版本的浏览器则是使用了 iframe 来实现无刷新的异步上传。通过动态的去给页面添加一个 form 和一个不可见的iframe，并把 form 的target 设为 iframe的名字，然后提交该表单去实现上传，该方式的状态栏还是会有刷新，但是我们所看到的页面是没有刷新的。

3. 开发流程

参数配置定义：

data-url：请求的地址，必填项。
data-dataType：预期返回的数据类型，选填项，可为json或text，默认为json格式。
data-initImage：初始呈现的图片，必填项。
data-maxSize：限制允许上传的最大图片大小，选设，默认值为1024*1024。
data-accept：期望上传的图片格式，选设，默认为*。
接口定义

beforeUpload()：图片上传之前执行的方法。
success(data)：上传操作成功时执行的方法。
complete()：操作完成时执行的方法。
error()：发生错误时执行的方法。
确定插件的 HTML 和 CSS

该插件的目的是能够方便使用者去实现图片上传功能，所以应该尽可能的让用户编写的代码量越少越好，方便快捷。所以需要编写的 HTML 代码如下：

<div style="position: relative; overflow: hidden; width: 300px;height: 300px;">
            <input type="file" name="upload1" class="uploadPicContainer" data-initImage="image/head_img.png" data-dataType="json" data-url="/UploadServlet" data-maxSize="450"/>
        </div>