精华内容
下载资源
问答
  • 主要介绍了Vue + Node.js + MongoDB图片上传组件实现图片预览删除功能,结合实例形式详细分析了Vue + Node.js + MongoDB基于图片上传组件实现图片预览删除功能相关操作技巧,需要的朋友可以参考下
  • js实现图片上传预览

    2014-04-11 11:49:43
    js实现图片上传预览 php上传缩略图 php图片上传
  • js实现图片上传预览及进度条

    千次阅读 2017-04-01 15:01:54
    js实现图片上传预览及进度条  最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下:  1:去除浏览器默认的样式;  2:图片从本地选择后,...

    js实现图片上传预览及进度条

         最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下:

         1:去除浏览器<input type="file">默认的样式;

         2:图片从本地选择后,立即预览图片;

         3:使用上传可以查看上传进度(本博做的是上传的百分比,做成进度条类似);

         先看效果图:

                                                 

        做完的效果图如下:

     

                    

     

        首先是去除浏览器默认上传图片框,这个不是设置的css,再者<input type="file">具有安全性的限制,应该不是那么好操作的。这里使用的方法很简单,设置<input>为隐藏,再写个<div>,这个<div>标签的onclick事件触发<input>的onclick事件:

       

    <input id="localpic1" type="file" style="display:none">
    
    <div id="showpic1" οnclick="document.getElementById('localpic1').click();" data="点击添加海报">点击添加海报</div>


      这个比较简单,下面看看图片的预览:)

      图片的预览利用了<input type="file">的onchange事件,当检测到图片替换的时候,显示替换后的图片,我这边是直接插入的<img>标签,下面是布局:

    复制代码
     <li>
       <font>海报</font>
       <div class="pic" id="showpic1" οnclick="document.getElementById('localpic1').click();" data="点击添加海报">
              点击添加海报
         
    </div>
         <div id="showpic1Name"></div>
         <div id="showpic1Size"></div>
         <div class="info">
            <a id="showpic1Up" style="display:none" href="#" οnclick="uploadFile('pic1')">上传</a>
            <a id="showpic1Me" style="display:none" href="#">上传中</a>
            <a id="showpic1De" href="#" style="display:none" οnclick="deletePic('pic1')">删除</a>
            </div>
      </li>
    复制代码

    onchange事件:获取图片的地址(value),好吧,这个万恶的各种浏览器。然后获取图片的信息予以显示,这个相对还是比较简单的,聪明的小伙应该一下就明白。

    复制代码
    <input id="locallogo" type="file" οnchange="previewImage(this,'showlogo');">
    
        /*
         *图片的操作
        */
        function previewImage(fileObj,divPreviewId){
            var allowExtention=".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
            var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();            
            var browserVersion= window.navigator.userAgent.toUpperCase();
            if(allowExtention.indexOf(extention)>-1){ 
                if(fileObj.files){//兼容chrome、火狐7+、360浏览器5.5+等,应该也兼容ie10,HTML5实现预览
                    if(window.FileReader){
                        var reader = new FileReader(); 
                        reader.onload = function(e){
                            document.getElementById(divPreviewId).innerHTML="<img src='"+e.target.result+"'>";
                        }  
                        reader.readAsDataURL(fileObj.files[0]);
                    }else if(browserVersion.indexOf("SAFARI")>-1){
                        alert("不支持Safari浏览器6.0以下版本的图片预览!");
                    }
                }else if (browserVersion.indexOf("MSIE")>-1){//ie、360低版本预览
                    if(browserVersion.indexOf("MSIE 6")>-1){//ie6
                        document.getElementById(divPreviewId).innerHTML="<img src='"+fileObj.value+"'>";
                    }else{//ie[7-9]
                        fileObj.select();
                        if(browserVersion.indexOf("MSIE 9")>-1)
                            fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问
                        var newPreview =document.getElementById(divPreviewId+"New");
                        if(newPreview==null){
                            newPreview =document.createElement("div");
                            newPreview.setAttribute("id",divPreviewId+"New");
                            newPreview.style.width = "150px";
                            newPreview.style.height = "150px";
                            newPreview.style.border="solid 1px #d2e2e2";
                        }
                        newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";                            
                        var tempDivPreview=document.getElementById(divPreviewId);
                        tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);
                        tempDivPreview.style.display="none";                    
                    }
                }else if(browserVersion.indexOf("FIREFOX")>-1){//firefox
                    var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
                    if(firefoxVersion<7){//firefox7以下版本
                        document.getElementById(divPreviewId).innerHTML="<img src='"+fileObj.files[0].getAsDataURL()+"'>";
                    }else{//firefox7.0+ 
                        document.getElementById(divPreviewId).innerHTML="<img src='"+window.URL.createObjectURL(fileObj.files[0])+"'>";
                    }
                }else{
                    document.getElementById(divPreviewId).innerHTML="<img src='"+fileObj.value+"'>";
                }         
            }else{
                alert("仅支持"+allowExtention+"为后缀名的文件!");
                fileObj.value="";//清空选中文件
                if(browserVersion.indexOf("MSIE")>-1){                        
                    fileObj.select();
                    document.selection.clear();
                }                
                fileObj.outerHTML=fileObj.outerHTML;
            }
            document.getElementById(divPreviewId).style.border="";
            document.getElementById(divPreviewId+"Up").style.display="block";
            document.getElementById(divPreviewId+"De").style.display="block";
            showFileInfo(fileObj.files[0],divPreviewId);
        }
        //获取图片的大小、名称予以显示,这里还可以显示图片的文件类型
        function showFileInfo(file,divPreviewId) {
            var fileName = file.name;
            var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
            if (file) {
                var fileSize = 0;
                if (file.size > 1024 * 1024){
                    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                }else{
                    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
                }
                document.getElementById(divPreviewId+"Name").innerHTML = '文件名: ' + file.name;
                document.getElementById(divPreviewId+"Size").innerHTML = '图片大小: ' + fileSize;
                document.getElementById(divPreviewId+"Name").style.display="block";
                document.getElementById(divPreviewId+"Size").style.display="block";
            }
        }
    复制代码


       最后一个进入条问题比较难以解决,你要监听图片上传了多少。我觉得大部分人在这里会选择插件,那样的话就不用自己管了,但是如果有兴趣,继续往下看吧,I am glad to share my skill with you all!

        当我用<form>解决不了,用ajax解决不了的时候(我看ajax有人好像说能上传文件,这个处理下应该是可以的),就想到了XMLHttpRequest(),嘿嘿。

    复制代码
         function uploadFile(fileId) {
            document.getElementById("show"+fileId+"Up").style.display="none";
            document.getElementById("show"+fileId+"Me").style.display="block";
            var fd = new FormData();
            fd.append("file", document.getElementById("local"+fileId).files[0]);
            var xhr = new XMLHttpRequest();
            //上传中设置上传的百分比
            xhr.upload.addEventListener("progress", function(evt){
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    document.getElementById("show"+fileId+"Me").innerHTML = '上传中'+percentComplete+"%";
                }else {
                    document.getElementById("show"+fileId+"Me").innerHTML = '无法计算';
                }
            }, false);
            //请求完成后执行的操作
            xhr.addEventListener("load", function(evt){
                var message = evt.target.responseText,
                    obj = eval("("+message+")");
                if(obj.status == 1){
                    $("#"+fileId).val(obj.picName);
                    document.getElementById("show"+fileId+"Me").innerHTML = "已上传";
                      alert("上传成功!");
                }else{
                    alert(obj.message);
                }
                
            }, false);
            //请求error
            xhr.addEventListener("error", uploadFailed, false);
            //请求中断
            xhr.addEventListener("abort", uploadCanceled, false);
            //发送请求
            xhr.open("POST", "${ctx}/manage/file/File/uploadPic.htm");
            xhr.send(fd);
        }
    
        function uploadFailed(evt) {
            alert("上传出错.");
        }
    
        function uploadCanceled(evt) {
            alert("上传已由用户或浏览器取消删除连接.");
        }
    复制代码

      ok,最后一个问题算是搞定了,在firefox,ie9,chrome下测试没有问题,版本应该都不高,其他的就不管了哈。
      本人第一次发博,各位大侠手下留情~


    展开全文
  • 说明 最近在做一个小程序的项目,初次接触,也是边学边做,目前遇到图片处理的相关问题,在此记录,也对有需要的朋友...图片预览效果 欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来,用它...
    最近在做一个小程序的项目,初次接触,也是边学边做,目前遇到图片处理的相关问题,在此记录,也对有需要的朋友提供一些帮助。 类似于微信朋友圈发布图片,长按指定图片删除 
    

    长按图片删除,不足9张可以继续添加

    图片预览效果

    实现思路:

    • 调整页面,实现展示效果
    • 使用wx.chooseImage实现拍照和选择照片
    • 使用wx.previewImage实现图片预览
    • 使用bindlongpress自定义图片删除功能

    话不多说,上代码:
    wxml代码

    <view class="weui-cells">
      <view class="weui-cell">
        <view class="weui-cell__bd">
          <view class="weui-uploader">
            <view class="weui-uploader__hd">
              <view class="weui-uploader__title">图片上传</view>
              <view class="weui-uploader__info">{{files.length}} / 9</view>
            </view>
            <view class="weui-uploader__bd">
              <view class="weui-uploader__files" id="uploaderFiles">
                <block wx:for="{{files}}" wx:key="*this">
                  <view class="weui-uploader__file" bindtap="previewImage" bindlongpress="deleteImage" id="{{item}}" data-index="{{index}}">
                    <image class="weui-uploader__img" src="{{item}}" mode="aspectFill"/>
                  </view>
                </block>
              </view>
              <view wx:if="{{files.length < 9}}" class="weui-uploader__input-box" >
                <view class="weui-uploader__input" bindtap="chooseImage"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    js代码

    Page({
      data: {
        files: []
      },
      chooseImage: function(e) {
        var that = this;
        var images = that.data.files;
        wx.chooseImage({
          count: 9 - images.length,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: function(res) {
            // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
            that.setData({
              files: that.data.files.concat(res.tempFilePaths)
            });
          }
        })
      },
      previewImage: function(e) {
        wx.previewImage({
          current: e.currentTarget.id,
          urls: this.data.files
        })
      },
      deleteImage: function(e) {
        var that = this;
        var images = that.data.files;
        var index = e.currentTarget.dataset.index; //获取当前长按图片下标
        wx.showModal({
          title: '系统提醒',
          content: '确定要删除此图片吗?',
          success: function(res) {
            if (res.confirm) {
              images.splice(index, 1);
            } else if (res.cancel) {
              return false;
            }
            that.setData({
              files: images
            });
          }
        })
      }
    })

    下面没有了,以上就是实现的全部代码!! 附上微信小程序官方教程 —— [ 微信小程序API ]

    展开全文
  • //功能:Javascript本地图片预览 //Author:yaosansi //Site:http://www.yaosansi.com //Date:2006-02-21 //说明:简单的判断了文件的合法性 //适用于:上传文件前预览本地图片 //=======================....
    <script language="javascript" type="text/javascript">
    
    //==============================
    //功能:Javascript本地图片预览
    //Author:yaosansi
    //Site:http://www.yaosansi.com
    //Date:2006-02-21
    //说明:简单的判断了文件的合法性
    //适用于:上传文件前预览本地图片
    //==============================
    function ShowImage(value,img)
    {
    alert(value);
    //检测盘符
    alert(value.indexOf(':'));
    //检测文件是否有扩展名
    alert(value.length-value.lastIndexOf('.'));
    //取文件扩展名
    alert(value.substr(value.length-3,3));
    //检测文件扩展名是否合法
    alert(CheckExt(value.substr(value.length-3,3)));

    if(value.length>5 && value.indexOf(':')==1 && (value.length-value.lastIndexOf('.'))==4 && CheckExt(value.substr(value.length-3,3)))
    {
    img.src=value;
    img.alt="本地图片预览";
    img.style.visibility="visible";
    }
    else
    {
    img.style.visibility="hidden";
    }
    }
    //检查扩展名是否合法,合法返回True
    function CheckExt(ext)
    {
    //这里设置允许的扩展名
    var AllowExt="jpg|gif|jpeg|png|bmp";
    var ExtOK=false;
    var ArrayExt;
    if(AllowExt.indexOf('|')!=-1)
    {
    ArrayExt=AllowExt.split('|');
    for(i=0;i<ArrayExt.length;i++)
    {
    if(ext.toLowerCase()==ArrayExt[i])
    {
    ExtOK=true;
    break;
    }
    }
    }
    else
    {
    ArrayExt=AllowExt;
    if(ext.toLowerCase()==ArrayExt)
    {
    ExtOK=true;
    }
    }
    return ExtOK;
    }
    </script>


    </BODY>
    </HTML>
    展开全文
  • 原生 js 整合的一个图片上传预览控件,实现类似微信朋友圈选择删除图片的效果。不依赖任何其他js框架
  • 前段时间在网络上找的代码,修改了一部分用在了项目里。...//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3 function PreviewImage(fileObj) { //创建dom元素 var divPreviewId = 'divPrevi

    前段时间在网络上找的代码,修改了一部分用在了项目里。原博客地址找不到了,如果原作者看到的话留言我,将于第一时间删除。

    //js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
        function PreviewImage(fileObj) {
            //创建dom元素
            var divPreviewId = 'divPreview_' + fileObj.name;
            var imgPreviewId = 'imgHeadPhoto_' + fileObj.name;
            var html='<div id="'+divPreviewId+'">'+
                        '<img id="'+imgPreviewId+'" src="images/moren.jpg" style="width: 120px; height: 120px; border: solid 1px #d2e2e2;" />'+
                     '</div>';
            $('#'+divPreviewId).remove();
            $(fileObj).after(html);
            //进行限制
            var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
            var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
            var browserVersion = window.navigator.userAgent.toUpperCase();
            if (allowExtention.indexOf(extention) > -1) {   //格式正确
                if (fileObj.files) {    //HTML5实现预览,兼容chrome、火狐7+等
                    if (window.FileReader) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                        }
                        reader.readAsDataURL(fileObj.files[0]);
                    } else if (browserVersion.indexOf("SAFARI") > -1) {
                        $('#'+divPreviewId).remove();
                        alert("不支持Safari6.0以下浏览器的图片预览!");
                    }
                } else if (browserVersion.indexOf("MSIE") > -1) {
                    if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
                        document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
                    } else {//ie[7-9]
                        fileObj.select();
                        if (browserVersion.indexOf("MSIE 9") > -1)
                            fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
                        var newPreview = document.getElementById(divPreviewId + "New");
                        if (newPreview == null) {
                            newPreview = document.createElement("div");
                            newPreview.setAttribute("id", divPreviewId + "New");
                            newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
                            newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
                            newPreview.style.border = "solid 1px #d2e2e2";
                        }
                        newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                        var tempDivPreview = document.getElementById(divPreviewId);
                        tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
                        tempDivPreview.style.display = "none";
                    }
                } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
                    var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
                    if (firefoxVersion < 7) {//firefox7以下版本
                        document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
                    } else {//firefox7.0+                    
                        document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
                    }
                } else {
                    document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
                }
            } else {
                $('#'+divPreviewId).remove();
                alert("仅支持" + allowExtention + "为后缀名的文件!");
                fileObj.value = ""; //清空选中文件
                if (browserVersion.indexOf("MSIE") > -1) {
                    fileObj.select();
                    document.selection.clear();
                }
                fileObj.outerHTML = fileObj.outerHTML;
            }
            return fileObj.value;    //返回路径
        }
    展开全文
  • //js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3 function PreviewImage(fileObj) { //创建dom元素 var divPreviewId = 'divPreview_' + fileObj.name; var imgPreviewId = 'imgHeadPhoto_...
  • 前端js实现图片上传预览

    万次阅读 2017-06-05 13:55:17
    前端实现图片上传预览,实现的原理是使用input标签,type=file,实现图片的上传,对input进行onchange事件的监听,当input的value值改变时代表用户已经上传了图片,而input的value值就是用户上传的图片的相对路径,...
  • 在开发的过程中有时候需要本地图片预览上传,这里是我淘到的宝贝,在此进行分享,直接 复制代码就可使用。代码如下, 这是html代码(在使用之前一定要先引入jquery) 这里可以定义图片显示的大小等,样式什么的,...
  • 地址:http://www.jb51.net/article/118660.htm js HTML5拖拽图片预览 地址:http://www.jb51.net/article/88803.htm js 实现图片上传并实现预览的效果 ...input file样式修改以及图片预览删除...
  • 首先看一下效果图: 正常的图片列表 点击图片后的预览预览图左右滑动时 用到的插件是: 1.mui.css ...data-preview-group: 图片分组,用处是图片放大之后左右滑动的图片组,如果需要图片放大之后...
  • pdf.js实现图片在线预览

    千次阅读 2019-06-23 13:28:00
     前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器不兼容,所以,选择了使用pdf.js,这里记录一下,...
  • Vue搭建页面,form绑定一个不可见的iframe实现无刷新提交表单,图片选择完毕后,递归调用axios将所选图片依次post到后台,实现单图和多图的上传功能,并实现图片预览、进度条、检测图片大小是否超出限制(前端检测)...
  • 现在有一个需求,需要实现图片上传、展示、删除的功能,看看操作代码
  • JavaScript实现图片上传预览及进度条

    千次阅读 2014-01-12 00:50:44
    最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器默认的样式; 2:图片从本地选择后,立即预览图片; 3:使用上传可以...
  • upload上传组件提供了很多种案例,这次列举的是`图片列表缩略图`的上传 1. on-preview 点击文件列表中已上传的文件时的钩子 function(file) 2. on-remove 文件列表移除文件时的钩子 function(file, fileList) 3. on-...
  • 如果是图片、视频、txt等格式的会直接预览文件,而不是像docx、xlsx一样直接下载,项目中为了功能明确,将预览单独加了一个查看按钮,下载按钮要实现无论什么文件格式都直接下载。 有两种方式处理: 一.后台接口...
  • jQuery实现图片预览大图效果

    千次阅读 2014-04-02 18:40:40
    因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScript来说,同样的效果,但是很简单的代码。jQuery中的核心知识点就是选择器的使用,选择器的内容我会在之后的博客中总结,希望大家去看下,学好了选择...
  • 最近学前端的时候,有个搭建网站的学习任务。其中就有一个功能要实现:可以从本地上传图片到网页,并在本地实现预览。 查了很多资料,最后终于找到一种比较简单的实现方法。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,257
精华内容 5,302
关键字:

js实现图片预览删除