<%--

  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. VC++ CMsflexgrid 使用

    引用actvie x :microsoft CMsflexgrid; BOOL CCalibrationCoordsDisDlg::OnInitDialog() { CDialog::OnInitDi ...

  2. dotnet 通过 WMI 获取系统安装软件

    本文告诉大家如何通过 WMI 获取系统安装的软件,这个方法不能获取全部的软件 通过 Win32_Product 可以获取系统安装的软件 var mc = "Win32_Product&quo ...

  3. linux 系统挂起

    尽管内核代码的大部分 bug 以 oops 消息结束, 有时候它们可能完全挂起系统. 如果系 统挂起, 没有消息打印. 例如, 如果代码进入一个无限循环, 内核停止调度,[15]15 并且系 统不会响 ...

  4. vuex 快速上手，具体使用方法总结（含使用例子）

    网上有关vuex的文章很多,但有些比较复杂,这篇文章能让你快速使用vuex: vuex 用处:管理全局状态(类似全局变量,每个组件都能访问到) vuex 用法: //下面是一个js文件,用最简单最全的 ...

  5. H3CFTP操作示例

  6. Linux 内核列举设备和驱动

    如果你在编写总线级别的代码, 你可能不得不对所有已经注册到你的总线的设备或驱动进 行一些操作. 它可能会诱惑人直接进入 bus_type 结构中的各种结构, 但是最好使用已经 提供的帮助函数. 为操作 ...

  7. Jquery Validate表单验证，动态添加和删除验证规则

    最近一直在忙着维护Jquery的商城,用到了Validate的表单验证,觉得很有意思,就纪录一下. // 动态添加验证规则 $("#invoice_send_region_id") ...

  8. Scala中 下划线的用处

    From:   http://congli.iteye.com/blog/2169401 1.作为“通配符”,类似Java中的*.如import scala.math._ 2.:_*作为一个整体,告诉 ...

  9. php 上传文件并对上传的文件进行简单验证（错误信息，格式（防伪装），大小，是否为http上传）

    <body> <?php /** *验证错误 *如果有错,就返回错误,如果没错,就返回null */ function check($file) { //1:验证是否有误 if($f ...

  10. 基于bootstrap3.3.4的简单框架搭建(左侧导航收起滚动)

    前提:博主本人做.net方向的2年多了 去年的后半年公司要做基于bootstrap框架的后台,由于没有经验,然后跟公司美工一块从0开始折腾,对这个框架不是太熟悉,然后就开始各种自己写js写css的往里 ...