<%--

  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. 机器学习——集成学习之Boosting

    整理自: https://blog.csdn.net/woaidapaopao/article/details/77806273?locationnum=9&fps=1 AdaBoost GB ...

  2. H3C STP监控与维护

  3. H3C使用ping命令--用户视图

    完整的ping命令,用于下面参考 <H3C>ping 1.1.1.1   PING 1.1.1.1: 56  data bytes, press CTRL_C to break     R ...

  4. C# 性能分析 反射 VS 配置文件 VS 预编译

    本文分析在 C# 中使用反射和配置文件和预编译做注入的性能,本文的数据是为预编译框架,开发高性能应用 - 课程 - 微软技术暨生态大会 2018 - walterlv提供 本文通过代码生成工具,使用C ...

  5. vue中的时间修饰符stop,self

    stop阻止自身以外的冒泡 self只会阻止自身冒泡

  6. SDOI2019热闹又尴尬的聚会

    P5361 [SDOI2019]热闹又尴尬的聚会 出题人用脚造数据系列 只要将\(p\)最大的只求出来,\(q\)直接随便rand就能过 真的是 我们说说怎么求最大的\(p\),这个玩意具有很明显的单 ...

  7. Delta Lake源码分析

    目录 Delta Lake源码分析 Delta Lake元数据 snapshot生成 日志提交 冲突检测(并发控制) delete update merge Delta Lake源码分析 Delta ...

  8. dotnet 使用 lz4net 压缩 Stream 或文件

    在 dotnet 可以使用 LZ4 这个无损的压缩算法,这个压缩算法的压缩率不高但是速度很快.这个库支持在 .NET Standard 1.6 .NET Core .NET Framework Mon ...

  9. jenkins+Git+Gitlab+Ansible实现持续集成自动化部署静态网站(二)

    引言:首先我们可以实现一键部署网站,但在实际生产环境网站部署完成之后,我们的开发隔三差五要修改下网站的内容,难道都要我们运维手动执行命令吗?没有一种方法使得开发人员修改完代码自己测试,部署上线呢,那这 ...

  10. Team Foundation Server 2015使用教程【1】：团队项目创建