<%--

  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. Linux下tomcat启动成功但是Windows打不开tomcat网址

    前提条件: 1.Linux和Windows都可以相互ping通. 2.Linux下tomcat可以启动,并且在Linux下可以访问8080 出现的问题: 当我在Windows下访问时,无法连接或者出现 ...

  2. 特殊字符，如Emoji表情Base64存储到数据库

    有些特殊字符,如Emoji,存储到oracle数据库就会变成乱码,解决方案就是Base64转码后存储到数据库,取出后再解码传输,经过验证是可以的. 编码存储,接收参数转json再.ToString() ...

  3. jQuery的使用及关于框架造型 专题

    Introduction 正如jQuery所宣称的一样,Write Less, Do More.很多时候我们喜欢用它来解决问题.但增加一个库必然意味着更大的网络负担,意味着更高的页面初始载入时间.并且 ...

  4. JMeter JMS测试计划

    在本节中,我们将学习如何编写一个简单的测试计划来测试Java Messaging Service(JMS). 出于测试目的,我们使用Apache ActiveMQ.有各种JMS服务器,如:glassf ...

  5. CentOS系统将UTC时间修改为CST时间方法

    世界协调时间(Universal Time Coordinated,UTC): GPS 系统中有两种时间区分,一为UTC,另一为LT(地方时)两者的区别为时区不同,UTC就是0时区的时间,地方时为本地 ...

  6. Linux基础：认识Linux

    1.Linux操作系统的特点 优点 ​ (1)可靠性高:linux是基于Unix的概念开发出来的系统,拥有Unix的稳定且效率的特点.运行一年以上而不曾宕机.不必关机是很平常的事情 : ​ (2)彻底 ...

  7. Excel读取方式优化（浅谈对规律的认知）

    相信大家都接触过对Excel的读取,今天突发奇想,想将自己的一小段经历分享出来.灵活识别列名并将其存到对象数组中. 固定形式的Excel列的读取: 源于我第一次操作Excel,将列名对应成table中 ...

  8. `docker数据持久化volume和bind mounts两种方式

    将数据从宿主机到容器的三种方式: ,volumes:docker管理宿主机文件系统的一部分(/var/lib/docker/volumes)保存数据的最佳方式 ,bind mounts 将宿主机上的任 ...

  9. 面试官刁难：Java字符串可以引用传递吗？

    老读者都知道了,六年前,我从苏州回到洛阳,抱着一幅"海归"的心态,投了不少简历,也"约谈"了不少面试官,但仅有两三个令我感到满意.其中有一位叫老马,至今还活在我 ...

  10. 使用rapidjson把文本json数据解析到树状结构

    一个递归搞定 无聊的时候练练手就写了一个 头文件什么的我就不贴了 demo程序是MFC写的 void ParseObject(rapidjson::Value dc, CTreeCtrl * pTre ...