<%--

  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. jquery 选择多级父子元素

    <div class="box"> <div class="item"> <div class="out"&g ...

  2. ZR提高失恋测3

    ZR提高失恋测3 题目链接 (感觉这一场比以往的简单了一些) 估分 100 + 40 + 40 得分 100 + 60 + 40 ??? A 首先,我们能够想到一个比较简单的\(n^2\)做法, 枚举 ...

  3. hdu 6579 Operation （在线线性基）

    传送门 •题意 一个数组a有n个数 m个操作 操作① 询问$[l,r]$区间的异或值 操作② 在数组末尾追加一个数x,数组长度变为$n+1$ 其中$l,r$不直接给出,其中$l=l%n+1,r=r%n ...

  4. dotnet 通过 WMI 获取系统信息

    本文告诉大家如何通过 WMI 获取系统信息 通过 Win32_OperatingSystem 可以获取系统信息 var mc = "Win32_OperatingSystem"; ...

  5. 查看当前android设备已安装的第三方包

    查看当前android设备已安装的第三方包 adb shell pm list package -3 2        adb shell "getprop ro.build.version ...

  6. Unitils集成DBUnit、Spring-单元测试(转)

    1.maven-pom文件中引入相关jar包 <!-- Unitils -dbunit.Spring --> <dependency> <groupId>org.u ...

  7. Struts2 控件标签

    Struts 2 的标签有一组标签,更容易控制流程页面执行.以下是重要的Struts2控制标签列表: if /else 标签: 这些标签执行可在每一种语言找到的一种基本条件流程. 'If'标签可用于本 ...

  8. KEIL5.11安装小结

    一.注意点 1.安装路径不能带中文,必须是英文路径 2.安装目录不能跟 51 的 KEIL 或者 KEIL4 冲突,三者目录必须分开 3.KEIL5 不像 KEIL4 那样自带了很多厂商的 MCU 型 ...

  9. Spring||IQ

    Here's the question about spring 1.Spring概述 Spring 是一个开源的轻量级Java SE(Java 标准版本)/Java EE(Java 企业版本)开发应 ...

  10. LINQ 实现多字段关联查询 C#

    var query = from main in _userDeviceChannelRole.Table join deviceChannelInfo in _deviceChannelReposi ...