• js多图预览及上传功能


    <%--
      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="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=" 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>
  • 相关阅读:
    美团前端面经-2020-估计是凉了
    JavaScript的垃圾回收机制与内存泄漏
    从输入URL到浏览器显示页面发生了哪些事情---个人理解
    let 、const 、var、function声明关键字的新理解
    前端中堆和栈的概念
    今天想好好的认真开始维护自己的博客
    关于org.apache.poi 导出excel时引发的No such file or directory
    MySQL查询本周、上周、本月、上个月份数据的sql代码
    为mybatis mapper xml文件添加注释遇到问题
    ubuntu使用中遇到问题及解决方法持续整理
  • 原文地址:https://www.cnblogs.com/oldzhang1222/p/10245518.html
Copyright © 2020-2023  润新知