精华内容
下载资源
问答
  • html上传图片预览和裁剪(适合鼠标) 希望可以帮助有需要的人
  • HTML5拖拽上传图片预览提交代码是一款能够写评论拖拽上传图片特效。
  • html图片预览

    2014-11-14 08:25:08
    html上传图片预览
  • 主要为大家详细介绍了JS HTML5拖拽上传图片预览的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 1.添加、删除HTML结点 2.上传图片预览 添加、删除HTML结点 & 上传图片预览  删除  删除 增加附件 图片预览: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
  • html5图片上传插件预览图片尺寸大小上传代码html5图片上传插件预览图片尺寸大小上传代码
  • 主要介绍了JS+HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下
  • HTML5上传图片预览

    2019-08-10 01:06:47
    NULL 博文链接:https://xiaojin21cen.iteye.com/blog/2203429
  • 图片上传预览.html

    2021-03-30 16:21:29
    html+js实现图片上传预览
  • HTML5拖拽上传图片预览

    千次阅读 2016-07-15 13:10:38
    结合拖放事件API,DataTransfer对象和文件读取对象FileList等方面的知识,实现简易拖拽上传图片预览效果。需要了解熟悉个对象的关系以及用法,明确好实现思路!

    参考博文1:http://blog.csdn.net/testcs_dn/article/details/8695532

    参考博文2:http://justcoding.iteye.com/blog/2105760

    1.文件API:(File API)

    file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件。file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块。总之,file对象包含与FlieList对象,而file对象继承于Blob对象!

    各对象的相关属性关系:

    文件API对象

    FileReader接口:
    由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取文件中的数据。

    var reader=new FileReader();

    该接口总共有四个方法和六个事件:

    • readAsBinaryString(file):读取文件为二进制
    • readAsDataURL(file):读取文件DataURL
    • readAsText(file,[encoding]):读取文件为文本
    • about(none):中断文件读取

    • onabort:读取文件中断时触发
    • onerror:读取文件出错时触发
    • onloadstart:读取文件开始时触发
    • onprogress:读取文件中时一直触发
    • onload:读取文件成功时触发
    • onloadend:读取文件结束时触发(成功和失败都会触发)

    以上事件参数e有e.target.resultthis.result指向读取的结果!

    2.拖放API:

    拖放属性:将需要拖放的元素的dragable属性设置为true(dragable=”true”)!img元素和a元素默认可以拖放。

    拖放事件:(分为拖放元素事件和目标元素事件)

    拖放元素事件:

    • dragstart:拖拽前触发
    • drag ,拖拽前、拖拽结束之间,连续触发
    • dragend , 拖拽结束触发

    目标元素事件:

    • dragenter , 进入目标元素触发
    • dragover ,进入目标、离开目标之间,连续触发
    • dragleave , 离开目标元素触发
    • drop , 在目标元素上释放鼠标触发

    但是!需要注意的是:在目标元素中dragover和drop事件中要阻止默认行为(拒绝被拖放),否则拖放不能被实现!


    DataTransfer对象:专门用于存放拖放时要携带的数据,可以被设置为拖放事件的dataTransfer属性

    3个属性:

    • effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
    • effectAllowed:设置拖放操作的视觉效果
    • types:存入数据的种类,字符串的伪数组
    • files:获取外部拖拽的文件,返回一个fileList列表,filesList下有个type属性,返回文件的类型

    4个方法:

    • setData() : 设置数据 key和value(必须是字符串)
    • getData() : 获取数据,根据key值,获取对应的value
    • clearData():清除DataTransfer对象存放的数据
    • setDragImage(imageUrl,log x,long y):用img元素来设置拖放图标
    //示例:
    target.addEventListener('dragstart',function(e){
        var fs = e.dataTransfer.files;//获取拖放的文件对象列表FlieList对象
        var dt=e.dataTransfer;//作为拖放事件的dataTransfer属性
        dt.effectAllowed='copy';
        dt.setData('text/plain','hello');
        dt.setDragImage(dragIcom,-10,-10);
    });

    3.拖拽上传图片预览:

    思路:

    1. 熟悉文件拖拽 目标元素 的四个事件,注意:ondragover、ondrop事件中阻止默认行为
    2. 拖拽放置后,获取到文件对象集合:e.dataTransfer.files
    3. 循环该集合中的每个文件对象,判断文件类型以及文件大小,是指定类型则进行相应的操作
    4. 读取文件信息对象:new FileReader(),它有读取文件对象为DataUrl等方法:readAsDataURL(文件对象)、读取成功之后触发的事件:onload事件等,this.result为读取到的数据
    5. 在FileReader对象中的几个事件中进行相应的逻辑处理

    HTML:

    <div class="container">
       <p class="text">请将图片文件拖拽至此区域!</p>
    </div>
        总加载数:<span id='total'>100</span>

    JQ:

    <script type="text/javascript">
            $(function() {
                /*思路:
                 *1.熟悉文件拖拽  目标元素 的四个事件,注意:ondragover、ondrop事件中阻止默认行为
                 *2.拖拽放置后,获取到文件对象集合:e.dataTransfer.files
                 *3.循环该集合中的每个文件对象,判断文件类型以及文件大小,是指定类型则进行相应的操作
                 *4.读取文件信息对象:new FileReader(),它有读取文件对象为DataUrl等方法:readAsDataURL(文件对象)、读取成功之后触发的事件:onload事件等,this.result为读取到的数据
                 *5.在FileReader对象中的几个事件中进行相应的逻辑处理
                 *
                 */
    
                //必须将jq对象转换为js对象,调用原生方法
                var oDiv = $(".container").get(0);
                var oP = $(".text");
                //进入
                oDiv.ondragenter = function() {
                        oP.html('');
                    }
                    //移动,需要阻止默认行为,否则直接在本页面中显示文件
                oDiv.ondragover = function(e) {
    
                        e.preventDefault();
                    }
                    //离开
                oDiv.onleave = function() {
                        oP.html('请将图片文件拖拽至此区域!');
                    }
                    //拖拽放置,也需要阻止默认行为
                oDiv.ondrop = function(e) {
    
                    e.preventDefault();
                    //获取拖拽过来的对象,文件对象集合
                    var fs = e.dataTransfer.files;
                    //若为表单域中的file标签选中的文件,则使用form[表单name].files[0]来获取文件对象集合
                    //打印长度
                    console.log(fs.length);
                    //循环多文件拖拽上传
                    for (var i = 0; i < fs.length; i++) {
                        //文件类型
                        var _type = fs[i].type;
    
                        console.log(_type);
                        //判断文件类型
                        if (_type.indexOf('image') != -1) {
                            //文件大小控制
                            console.log(fs[i].size);
                            //读取文件对象
                            var reader = new FileReader();
                            //读为DataUrl,无返回值
                            reader.readAsDataURL(fs[i]);
                            reader.onloadstart = function(e) {
                                    //开始加载
                                }
                                // 这个事件在读取进行中定时触发
                            reader.onprogress = function(e) {
    
                                $("#total").html(e.total);
                            }
    
                            //当读取成功时触发,this.result为读取的文件数据
                            reader.onload = function() {
                                    //文件数据
                                    // console.log(this.result);
                                    //添加文件预览
                                    var oImg = $("<img style='width:100px;' src='' />");
                                    oImg.attr("src", this.result);
                                    $(oDiv).append(oImg); //oDiv转换为js对象调用方法
                                }
                                //无论成功与否都会触发
                            reader.onloadend = function() {
                                if (reader.error) {
                                    console.log(reader.error);
                                } else {
                                    //上传没有错误,ajax发送文件,上传二进制文件
                                }
                            }
                        } else {
                            alert('请上传图片文件!');
                        }
                    }
    
                }
            });
        </script>

    效果图:

    拖拽上传图片预览


    总结:结合拖放事件API,DataTransfer对象和文件读取对象FileList等方面的知识,实现简易拖拽上传图片预览效果。需要了解熟悉个对象的关系以及用法,明确好实现思路!

    展开全文
  • 文件上传 图片预览

    2018-08-27 09:48:23
    上传图片时的图片预览html
  • html5多图片上传预览

    2019-11-07 22:31:24
    html5多图片上传预览 html5多图片上传预览 html5多图片上传预览
  • 图片预览上传.html

    2019-10-22 14:28:59
    图片在上传之前先进行本地预览功能,显示为一个缩略图,再进行上传
  • HTML5实现多文件图片预览上传实例代码 HTML5实现多文件图片预览上传实例代码
  • html+js上传图片预览

    2018-07-08 13:00:19
    使用html与js实现多张图片上传预览功能,图片需要一张一张上传
  • [jQuery+Html5]上传图片预览Image

    千次阅读 2016-07-22 09:39:36
    [jQuery+Html5]上传图片预览Image

    使用jQuery+Html5实现前端上传图片后,无须上传至后台,回显到image中。

    Html中需要的两个组件:

    • input file
    • img

    JS代码

    var upfile = document.querySelector(file的ID);
    if(!/image\/\w+/.test(upfile.files[0].type)){
        alert("文件必须为图片!");
        return false;
    }
    var fileReader = new FileReader();
    fileReader.onload = function(evt){  
        if(FileReader.DONE==fileReader.readyState){
            //this.result为图片的Base64编码
            $(图片的id选择器).attr('src',this.result); 
         }
    }
    fileReader.readAsDataURL(upfile.files[0]);

    Java后台处理,将Base64编码字符转为图片,并且存入至服务器。
    注 : 图片会存放至服务器根目录remarkImage文件夹中。

        /**
         * 根据传入的Base64压缩后的编码,反向生成图片,存入服务器,并且返回html img标签字符串
         * @param remark
         * @param request
         * @return
         */
        public static String createRemarks(String remark , HttpServletRequest request){
            if(remark==null||"".equals(remark)){
                return null;
            }
    
            String[] split = remark.split(",");
            String start = "<p>";
            StringBuffer center = new StringBuffer() ;
            for(String rem : split){
                //绝对路径-生成图片用的绝对路径
                String path = request.getServletContext().getRealPath("/remarkImage"); 
                String imageName = UUID.randomUUID().toString() + ".jpg";
                String imagePath = path+"\\"+imageName;
                boolean generateImage = generateImage(rem,imagePath);
                //虚拟路径-img回显时用的虚拟路径
                String contextPath = request.getServletContext().getContextPath();
                contextPath = contextPath+"/remarkImage/"+imageName;
                if(generateImage){
                    String createHtmlImage = createHtmlImage(contextPath);
                    center.append(createHtmlImage);
                }
            }
            String end = "</p>";
            String string = start + center.toString() + end;
            return string;
        }
        /**
         * 创建一个HTML编码的图片标签
         * @return
         */
        public static String createHtmlImage (String imageSrc){
            String image = "<img src=\""+imageSrc+"\" />";
            return image;
        }
    展开全文
  • 早期浏览器,不能将本地图片作为页面元素处理,要实现图片预览需要将图片先上传到服务器,再从服务器取得进行预览 现代的浏览器功能越来越全面,因此可以实现对一些数据的本地处理 Chrome MsEdge(ie11) Firefox  上...
  • 前端上传图片预览

    千次阅读 2017-09-09 19:32:37
    前端上传图片预览此文将介绍两种方法来实现前端上传图片预览。方法1:FileReader FileReader对象允许Web应用程序异步读取存储在计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件。...

    前端上传图片预览

    此文将介绍两种方法来实现前端上传图片预览。

    方法1:FileReader

    • FileReader对象允许Web应用程序异步读取存储在计算机上的文件(或原始数据缓冲区)的内容,使用FileBlob对象指定要读取的文件。其中File对象可以是来自用户在一个<input>元素上选择文件返回的FileList对象,也可以来自拖放操作生成的DataTransfer对象,还可以是来自一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

    • demo示例:

    var oFileReader = new FileReader(); // 创建一个FileReader对象
    var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; // 验证图片的正则
    var oPreview = document.getElementsByClassName('img-thumbnail')[0]; // 预览图
    var oUpload = document.getElementsByClassName('file-upload')[0]; // 图片上传
    
    oFileReader.onload = function (event) {
        oPreview.src = event.target.result; // 替换预览图的src
    }
    
    oUpload.onchange = function loadImgFile() {
        var oFile = oUpload.files[0];
    
        if (!rFilter.test(oFile.type)) {
            alert('必须上传图片文件!');
        }
    
        if (window.FileReader) {
            /*
            读取指定的Blob对象或File对象中的内容。
            当读取操作完成时,会自动尝试去调用onloadend事件。
            同时,result属性将包含一个data:URL表示读取的文件的内容。
             */
            oFileReader.readAsDataURL(oFile);
        } else if (navigator.appName === 'Microsoft Internet Explorer') { // IE浏览器
            // IE10以下版本不支持FileReader()构造函数,利用滤镜兼容旧版本的IE
            oPreview.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)';
            oPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = oUpload.value;
        }
    }
    

    戳我看demo
    如果想对FileReader了解更多,请点此链接

    方法2:URL.createObjectURL(blob)

    URL.createObjectURL(blob)静态方法会创建一个DOMString,其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

    • demo示例:
    var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
    var oPreview = document.getElementsByClassName('img-thumbnail')[0]; // 预览图
    var oUpload = document.getElementsByClassName('file-upload')[0]; // 图片上传
    
    /**
     * 获取dataURL
     */
    function createObjectURL(blob) {
        return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
    }
    
    oUpload.onchange = function () {
        var oFile = oUpload.files[0];
    
        if (!rFilter.test(oFile.type)) {
            alert('必须上传图片文件!');
        }
    
        var imgDataURL;
        if (navigator.appName === '') {
            // IE10以下版本不支持FileReader()构造函数,利用滤镜兼容旧版本的IE
            imgDataURL = oUpload.value;
    
            oPreview.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)';
            oPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgDataURL;
        } else {
            imgDataURL = createObjectURL(oFile);
            oPreview.src = imgDataURL;
        }   
    }

    戳我看demo

    如果想对Object.createObjectURL()了解更多,请点此链接

    结束语

    完整的示例代码放在了我的github上,欢迎需要的小伙伴下载,点个星星哦。链接

    展开全文
  • 主要介绍了html5图片上传预览示例,需要的朋友可以参考下
  • 幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
  • 图片上传预览

    2016-10-31 14:28:44
    html5+js上传图片预览功能
  • html5图片上传预览实现

    万次阅读 多人点赞 2016-01-12 16:38:53
    html5中,提供了FileReader来读取本地文件,使我们可以实现图片预览功能。FileReader 属性,所有属性都是只读的:FileReader.error,读取文件时,出现的DOMError。 FileReader.readyState,读取状态;0,没有数据...

    最近做项目需要用到图片上传与预览功能,由于是用于手机端,所以研究了下H5的实现方式。

    图片预览

    首先,解决图片预览问题。在html5中,提供了FileReader来读取本地文件,使我们可以实现图片预览功能。

    FileReader

    • 属性,所有属性都是只读的:

      • FileReader.error,读取文件时,出现的DOMError。
      • FileReader.readyState,读取状态;0,没有数据加载;1,数据正在加载;2,读取已经完成。
      • FileReader.result,文件内容;该属性只在读取操作完成后才有效,并且格式取决于读取时使用的方法。
    • 事件:

      • FileReader.onabort,读取操作中止。
      • FileReader.onerror,读取出现错误。
      • FileReader.onload,读取成功完成后。
      • FileReader.onloadstart,读取开始。
      • FileReader.onloadend,读取完成,无论是否读取成功。
      • FileReader.onprogress,当读取Blob内容时。
    • 方法:

      • FileReader.abort()
        中止读取。然后readyState变为2。
      • FileReader.readAsArrayBuffer()
        将文件读取成ArrayBuffer。
      • FileReader.readAsBinaryString()
        读取成二进制字符串。
      • FileReader.readAsDataURL()
        读取成DataURL。
      • FileReader.readAsText()
        读取成文本。
    • 浏览器兼容性如图:
      桌面浏览器
      移动浏览器
      (图片截取自:https://developer.mozilla.org/en-US/docs/Web/API/FileReader

    预览功能实现

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>图片上传预览</title>
    <script type="text/javascript">
        function imgPreview(fileDom){
            //判断是否支持FileReader
            if (window.FileReader) {
                var reader = new FileReader();
            } else {
                alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
            }
    
            //获取文件
            var file = fileDom.files[0];
            var imageType = /^image\//;
            //是否是图片
            if (!imageType.test(file.type)) {
                alert("请选择图片!");
                return;
            }
            //读取完成
            reader.onload = function(e) {
                //获取图片dom
                var img = document.getElementById("preview");
                //图片路径设置为读取的图片
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    </script>
    </head>
    <body>
        <img id="preview" />
        <br />
        <input type="file" name="file" onchange="imgPreview(this)" />
    </body>
    </html>

    效果预览:
    这里写图片描述

    上传功能

    function upload() {
            var xhr = new XMLHttpRequest();
            var progress = document.getElementById("progress")
            progress.style.display = "block";
    
            xhr.upload.addEventListener("progress", function(e) {
                if (e.lengthComputable) {
                    var percentage = Math.round((e.loaded * 100) / e.total);
                    progress.value = percentage;
                }
            }, false);
    
            xhr.upload.addEventListener("load", function(e){
                  console.log("上传完毕...")
              }, false);
    
            xhr.open("POST", "upload");
            xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert(xhr.responseText); // handle response.
                    progress.style.display = "none";
                    progress.value = 0;
                }
            };
            var file = document.getElementById("imgFile");
            var fd = new FormData();
            fd.append(file.files[0].name, file.files[0]);
            xhr.send(fd);
        }

    XMLHttpRequest Level 2提供了文件上传功能,具体api可以
    https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

    展开全文
  • input file上传图片预览

    万次阅读 2015-12-30 12:55:05
    下载地址http://download.csdn.net/detail/cometwo/9383602input file上传图片预览其实很简单,只是没做过的感觉很神奇,今天我就扒下她神秘的面纱,其实原理真的非常非常非常非常非常非常简单!点击红框是加载显示...
  • 主要介绍了jQuery+HTML5实现图片上传预览效果,涉及jquery操作图片动态显示效果,非常简单实用,需要的朋友可以参考下
  • HTML5实现多文件图片预览上传功能实例,使用zyFile.js插件
  • 主要介绍了html5实现多图片预览上传及点击可拖拽控件的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本文实例为大家分享了js上传图片预览的方法,供大家参考,具体内容如下 <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片上传本地预览...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,327
精华内容 12,130
关键字:

html上传图片预览