<%--

  Created by IntelliJ IDEA.

  User: Old Zhang

  Date: 2018/12/27

  Time: 11:17

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

    <head>

        <title>Title</title>

    </head>

    <body>

            <td>

            　　　　<form id="form1" enctype="multipart/form-data" method="post">

            　　　　　　<input type="file" name="filePic" multiple="multiple" id="doc" style="width:300px;" onChange="javascript:setImagePreviews();" accept="image/*" />

            　　　　　</form>

            　　　　<input type="button" value="上传" onclick="uploadPic();" style="margin-right: 3px;margin-top: 4px;float:right;line-height: 16px;" />

            　　</td>

        　　<td width="100px" height="100px" >

        　　　　<div id="dd" style=" width:100px;"></div>

        　　</td>

    </body>

    <script src="./js/jquery-2.1.4.js"></script>

    <script type="text/javascript">

        //下面用于多图片上传预览功能

        function setImagePreviews(avalue) {

            var docObj = document.getElementById("doc");

            var dd = document.getElementById("dd");

            dd.innerHTML = "";

            var fileList = docObj.files;

            for (var i = 0; i < fileList.length; i++) {

                dd.innerHTML += "<div style='float:left' ><img id='img" + i + "'  /> </div>";

                var imgObjPreview = document.getElementById("img"+i);

                if (docObj.files && docObj.files[i]) {

                    //火狐下，直接设img属性

                    imgObjPreview.style.display = 'block';

                    imgObjPreview.style.width = '100px';

                    imgObjPreview.style.height = '100px';

                    //imgObjPreview.src = docObj.files[0].getAsDataURL();

                    //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

                    imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);

                }

                else {

                    //IE下，使用滤镜

                    docObj.select();

                    var imgSrc = document.selection.createRange().text;

                    alert(imgSrc)

                    var localImagId = document.getElementById("img" + i);

                    //必须设置初始大小

                    localImagId.style.width = "100px";

                    localImagId.style.height = "100px";

                    //图片异常的捕捉，防止用户修改后缀来伪造图片

                    try {

                        localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

                        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

                    }

                    catch (e) {

                        alert("您上传的图片格式不正确，请重新选择!");

                        return false;

                    }

                    imgObjPreview.style.display = 'none';

                    document.selection.empty();

                }

            }

            return true;

        }

        function  uploadPic(){

            var docObj = document.getElementById("doc");

            var fileList = docObj.files;

            var formData = new FormData();

            for (var i = 0; i < fileList.length; i++) {

                formData.append("filePic",fileList[i]);

            }

            $.ajax({

                url : 'uploadfarmfindPics?kind=thumbnail',

                type : 'POST',

                data : formData,

                // 告诉jQuery不要去处理发送的数据

                processData : false,

                // 告诉jQuery不要去设置Content-Type请求头

                contentType : false,

                beforeSend:function(){

                    console.log("正在进行，请稍候");

                },

                success : function(responseStr) {

                    if(responseStr.status===0){

                        console.log("成功"+responseStr);

                    }else{

                        console.log("失败");

                    }

                },

                error : function(responseStr) {

                    console.log("error");

                }

            });

        }

    </script>

</html>

js多图预览及上传功能的更多相关文章

  1. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  2. 用js实现预览待上传的本地图片

    js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...

  3. 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

    前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...

  4. JavaScript进阶(八)JS实现图片预览并导入服务器功能

    JS实现导入文件功能       赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!(PS:此篇博文是自己在午饭时间所写,为此没吃午饭,这就是程序猿 ...

  5. Node.js新手教程——怎样实现文件上传功能

    作者:zhanhailiang 日期:2014-11-16 本文将介绍怎样使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/node ...

  6. H5-FileReader实现图片预览&Ajax上传文件

    图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. 前端图片预览，上传前预览，兼容IE7、8、9、10、11，Firefox，Chrome(学习到的知识)

    文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...

  8. Mark : Bootstrap fileInput控制预览页面上传、删除、详情按钮

    Bootstrap fileInput默认预览上传效果: 而我们可能想要的结果是: 这时候可以通过初始参数layoutTemplates来控制:

  9. js-jssdk微信H5选择多张图片预览并上传（兼容ios，安卓，已测试）

    值得注意的是: 1.在微信H5中选择图片运用:wx.chooseImage,成功后返回:  res.localIds用于上传图片使用    上传图片:wx.uploadImage. 2.上传图片的时候 ...

随机推荐

  1. Java语言中使用OpenMP

    从去年年中,开始学习Java,主要是维护公司用Java编写的服务器软件.目前,该服务器软件遇到一个问题,在下载大文件时,如果同时下载的用户很多, 服务器软件工作会出现异常,有的用户无法下载.服务器硬件 ...

  2. 【58.33%】【codeforces 747B】Mammoth's Genome Decoding

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  3. CSS 高度居中方案

    实现高度自适应并且上下居中 <div id="wrap"> <div class="box">DemoSeat</div> ...

  4. P3803 FFT求多项式系数

    P3803 FFT求多项式系数 传送门:https://www.luogu.org/problemnew/show/P3803 题意: 这是一道FFT模板题,求多项式系数 题解: 对a和b的系数求一个 ...

  5. C# struct和class

    文字说明 值类型,存储于堆栈,存在于计算机内存逻辑区域中 引用类型,存储在堆中,位于计算机的不同逻辑位置 struct是值类型 推荐较小的数据类型使用,因为结构的大小会影响应用程序的性能 修改实际上是 ...

  6. python列表(list)

    #str #类,字符串 #name = "raitorei" #创建一个对象 #list #类,列表 ##############list类中提供的方法(灰魔法)######### ...

  7. 聚类分析 一、k-means

    前言 人们常说"物以类聚,人以群分",在生物学中也对生物从界门纲目科属种中进行了划分.在统计学中,也有聚类分析法,通过把相似的对象通过静态分类的方法分成不同的组别或者更多的子集,从 ...

  8. acwing 102 -利用二分枚举区间平均值

    我真的是服了,看了一晚上发现居然,,,,, 上图吧,话说有人评论没... 对于结果来说,不一定要枚举有序数列,感觉这是一种猜结果的方法,只不过特别精确,令人发指 #include<cstdio& ...

  9. 网络状态诊断工具——netstat命令

    netstat命令可以用来查询整个系统的网络状态.百度百科的定义如下: Netstat的定义是: Netstat是在内核中访问网络连接状态及其相关信息的程序,它能提供TCP连接,TCP和UDP监听,进 ...

  10. 【题解】CF742E (二分图+构造)

    [题解]CF742E (二分图+构造) 自闭了CodeForces - 742E 给定的条件就是一个二分图的模型,但是有一些不同.不同就不同在可以出现相邻两个点颜色相同的情况. 构造常用方法之一是按奇 ...