js 移动端 多图上传 预览 传给后端

HTML5定义了 FileReader 作为文件 API 的重要成员用于读取文件,根据 W3C 的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

FileReader的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result 属性中。

方法名 参数 描述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本

readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

FileReader还包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件。

事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

文件一旦开始读取,无论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。

了解了H5提供的 FileReader 后,我们就使用 FileReader 来实现同事选择多张图片并上传。

首先,在 HTML 加入一个file表单,并设置其为 multiple(浏览器在对multiple、disabled、checked、selected等这类属性进行解析时,只要这些属性存在,默认的就会被解析成true,甭管你设置的是disabled=true或者disabled=false亦或是disabled="",如果不想这些属性起作用,唯有用js来remove掉这些属性,除非你不设置这些属性。),并设置accept="image/*"用以只能选择图片类型的文件,代码如下:

<input type="file"  accept="image/*" name="upload" id="upload" multiple>
<input type="hidden" id="hiddenImgUrl" />   <!--设置这个隐藏域是为了便于存放上传至服务器后返回的图片地址-->
//图片上传
var file = {
    upload: function (e) {
        var self = this;
        var files = e.target.files;
        var type = files[0].type.split(‘/‘)[0];
        if (type != ‘image‘) {
            alertMsg(‘请上传图片‘);
            return;
        }
        //var size = Math.floor(file.size / 1024 / 1024);
        //if (size > 3) {
        //    alert(‘图片大小不得超过3M‘);
        //    return;
        //};
        for (var i = 0; i < files.length; i++) {
            var reader = new FileReader();
            reader.readAsDataURL(files[i]);
            reader.onloadstart = function () {
                //用以在上传前加入一些事件或效果,如载入中...的动画效果
            };
            reader.onloadend = function (e) {
                var dataURL = this.result;
                var imaged = new Image();
                imaged.src = dataURL;
                imaged.onload = function () {   //利用canvas对图片进行压缩
                    var canvas = document.createElement(‘canvas‘);
                    var ctx = canvas.getContext(‘2d‘);
                    var w = 0;
                    var h = 0;
                    if (this.width > this.height) {
                        h = 1000;
                        var scale = this.width / this.height;
                        h = h > this.height ? this.height : h;
                        w = h * scale;
                    }
                    else {
                        w = 1000;
                        var scale = this.width / this.height;
                        w = w > this.width ? this.width : w
                        h = w / scale;

                    }

                    var anw = document.createAttribute("width");
                    var anh = document.createAttribute("height");
                    if (this.width > this.height) {
                        anw.value = h;
                        anh.value = w;
                    }
                    else {
                        anw.value = w;
                        anh.value = h;
                    }
                    canvas.setAttributeNode(anw);
                    canvas.setAttributeNode(anh);

                    if (this.width > this.height) {
                        ctx.translate(h, 0);
                        ctx.rotate(90 * Math.PI / 180)
                        ctx.drawImage(this, 0, 0, w, h);
                        ctx.restore();
                    }
                    else {
                        ctx.drawImage(this, 0, 0, w, h);
                    }
                    dataURL = canvas.toDataURL(‘image/jpeg‘);

                    //回调函数用以向数据库提交数据
                    self.callback(dataURL);
                };
            };
        }
    },
    event: function () {
        $("#upload").change(function (e) {
            file.upload(e);
        });
    },
    callback: function (dataURL) {
        $.ajaxSettings.async = false;   //这里必须将ajax的异步改为同步才可以把返回并保存在隐藏域中的图片地址取出同时加在地址栏中作为参数一并传入下一个页面,这样做的目的是因为返回的图片地址不是一个json数组,而是单个的json字符串,所以只能将返回的图片地址json字符串拼接在一起作为参数传到下一个页面
        $.post(url, dataURL, function (res) {   //将base64图片流的图片通过后台转换成普通的图片路径并上传至服务器
            var imgUrl = $("#hiddenImgUrl").val();
            if (res.success) {
                $(".loading").hide();
                if (imgUrl != "") {
                    $("#hiddenImgUrl").val(imgUrl + "|" + res.imgUrl);   //中间加一个 | 是为了到下一个页面便于将传过去的图片地址参数转换为数组
                } else {
                    $("#hiddenImgUrl").val(res.imgUrl);
                }

                var imgUrl = $("#hiddenImgUrl").val();
                window.location.href = "apply.html?imgUrl=" + imgUrl;

            } else {
                alert(res.message);
            }
        }, "json");
    },
   init: function () {
        this.event();
    }
}
file.init();

由于在通过post向服务器上传时采用了同步的方式,所以我在写项目的过程中,老是无法实现加载中的动画效果,并且把加载中的动画效果放在 reader.onloadstart方法中依旧不起作用,最后只能放在了$("#upload").change(function (e) {})方法中,代码如下:

 event: function () {
        $("#upload").change(function (e) {
            $(".loading").show();
            file.upload(e);
        });
    }

以上是同时上传多张图片并将图片传入下一个页面继续进行后续操作,那么如何在同时上传完多张图片后在本页再预览这些图片呢?其实方法也是很简单的,上边callback函数里边的$.post的返回值里就包含了上传至服务器后的图片路径,将这些路径赋给img标签的src,然后再插入到页面中就OK了,代码如下:

callback: function (dataURL) {
        $.post(url, dataURL, function (res) {   //将base64图片流的图片通过后台转换成普通的图片路径并上传至服务器
            if (res.success) {
                $(".loading").hide();
                var result = ‘<div class="result"><img src="‘+res.imgUrl+‘" /></div>‘;
                var div = document.createElement(‘div‘);
                div.innerHTML = result;
                document.body.appendChild(div);
            } else {
                alert(res.message);
            }
        }, "json");
    }

以上在预览图片时由于不需要跳转,不需要传入返回的所有图片的路径作为参数,所以也就不需要将ajax的异步设置为同步了。

时间: 2024-10-21 05:38:49

js 移动端 多图上传 预览 传给后端的相关文章

js前端实现多图图片上传预览

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> //下面用于

移动端 js 实现图片上传 预览

方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> /

JS实现图片上传预览效果:方法一

<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) { //判断浏览器是否有FileReader接口 if(typeof FileReader =='undefined') { /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口

input file图片上传预览js实现

js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var $img = $("#ImgPr"); if(fileObj && fileObj.files && fileObj.files[

移动端图片上传预览

前天要做wap版的图片上传预览,找了好半天才找到比较适合的插件,我在该插件的基础上修改了一些东西,比如:上传后的图片删除后不能再添加.不能限制上传图片的数量. input虽然有multiple(多选),但是android目前是不支持的. 该插件控制不了不能上传同一张图片,暂时没有思路解决这个问题(:′д`)ゞ 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta charset=&

来之不易的js图片上传预览代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

jquery多图上传预览

html部分 <form method="post" action="" id="passForm" enctype="multipart/form-data" multipart=""> <div id="Pic_pass"> <p style="font-size: 20px;font-weight: bold;">请上传护照详

js:s上次预览,上传图片预览,图片上传预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JavaScript 图片上传预览效果

图片上传预览是一种在图片上传之前对图片进行本地预览的技术.使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验.但随着浏览器安全性的提高,要实现图片上传预览也越来越困难.不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现.例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法.但在opera.safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享.上次写的简便无刷新文