关键词:
1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下:
//本地图片在上传之前的预览效果 //图片上传预览 function previewImage(file) { if (file.files && file.files[0]) { var img = document.getElementById(‘imghead‘); var reader = new FileReader(); //读取file完成之后加载 reader.onload = function(evt){ img.src = evt.target.result; } //开始读取file reader.readAsDataURL(file.files[0]); } }
2 此时我们已经可以进行预览,然后往往我们需要在线剪切一下图片,鼠标可以在图片上画出自定义大小的方框,代码如下:
// startX, startY 为鼠标点击时初始坐标 // diffX, diffY 为鼠标初始坐标与 box 左上角坐标之差,用于拖动 var startX, startY, diffX, diffY; // 是否拖动,初始为 false var dragging = false; //window.onload=function(e) { //e = e || window.event; //是否存在方框 var existbox = false; // 鼠标按下 document.onmousedown = function(e) { startX = e.pageX; startY = e.pageY; if(isimg(startX,startY)!==true){ return false; } // 如果鼠标在 box 上被按下 if(e.target.className.match(/box/)) { // 允许拖动 dragging = true; // 设置当前 box 的 id 为 moving_box if(document.getElementById("moving_box") !== null) { document.getElementById("moving_box").removeAttribute("id"); } e.target.id = "moving_box"; // 计算坐标差值 diffX = startX - e.target.offsetLeft; diffY = startY - e.target.offsetTop; } else { //如果页面已经画出了box,则不能画出第二个box if(existbox===true){ return false; } // 在页面创建 box var active_box = document.createElement("div"); active_box.id = "active_box"; active_box.className = "box"; active_box.setAttribute("name","box"); active_box.style.top = startY + ‘px‘; active_box.style.left = startX + ‘px‘; document.body.appendChild(active_box); active_box = null; } //防止浏览器拖动图片乱动 e.preventDefault(); }; // 鼠标移动 document.onmousemove = function(e) { // 更新 box 尺寸 if(document.getElementById("active_box") !== null) { var ab = document.getElementById("active_box"); ab.style.width = e.pageX - startX + ‘px‘; ab.style.height = e.pageY - startY + ‘px‘; canvasimg(e); } // 移动,更新 box 坐标 if(document.getElementById("moving_box") !== null && dragging) { var mb = document.getElementById("moving_box"); var img = document.getElementById(‘imghead‘); mb.style.top = e.pageY - diffY + ‘px‘; mb.style.left = e.pageX - diffX + ‘px‘; canvasimg(e); } }; // 鼠标抬起 document.onmouseup = function(e) { // 禁止拖动 dragging = false; if(document.getElementById("active_box") !== null) { var ab = document.getElementById("active_box"); ab.removeAttribute("id"); existbox=true; // 如果长宽均小于 3px,移除 box if(ab.offsetWidth < 3 || ab.offsetHeight < 3) { document.body.removeChild(ab); existbox=false; } } };
3方框选中的内容我们使用canvas的drawImage方法画出来即可。接上文代码:
function canvasimg(e){ var img=document.getElementById("imghead"); var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); c.style.display="block"; if(document.getElementById("active_box") !== null) { var ab = document.getElementById("active_box"); ab.style.width = e.pageX - startX + ‘px‘; ab.style.height = e.pageY - startY + ‘px‘; c.height=parseInt(ab.style.height); c.width=parseInt(ab.style.width); ctx.drawImage(img,startX-img.offsetLeft,startY-img.offsetTop,parseInt(ab.style.width),parseInt(ab.style.height),0,0,parseInt(ab.style.width),parseInt(ab.style.height)); } // 移动,更新 box 坐标 if(document.getElementById("moving_box") !== null && dragging) { var mb = document.getElementById("moving_box"); mb.style.top = e.pageY - diffY + ‘px‘; mb.style.left = e.pageX - diffX + ‘px‘; c.height=parseInt(mb.style.height); c.width=parseInt(mb.style.width); ctx.drawImage(img,parseInt(mb.style.left)-img.offsetLeft,parseInt(mb.style.top)-img.offsetTop,parseInt(mb.style.width),parseInt(mb.style.height),0,0,parseInt(mb.style.width),parseInt(mb.style.height)); } }
4 Demo效果和源码下载可以点击demo
图片上传组件开发(代码片段)
图片上传,作为web端一个常用的功能,在不同的项目中有不同的需求,在这里实现一个比价基本的上传图片插件,主要能实现图片的浏览,剪裁,上传这三个功能,同时也是为了让自己对图片/文件上传和HTML5中名声在外的canvas... 查看详情
react实现图片裁剪/上传/预览/下载/删除(主要是图片裁剪)(代码片段)
最近工作中需要封装一个图片裁剪组件,也是封装了两天时间才完成,特此记录便于日后查阅。 先看一下最终效果,图示如下: 裁剪之后的图片可以预览,下载,删除,裁剪需要用... 查看详情
uniapp上传图片至服务器,获得在线图片链接预览(实战)
...,写一个成功的回调函数,在回到函数里面添加一个图片上传的方法uploadFile,在方法里面添加url,等参数。若是请求成功则返回一个图片链接添加接口之后的,demo如下: 查看详情
html5图片上传预览
HTML5实现图片的上传预览,需要使用FileReader对象。FileReader:TheFileReaderobjectletswebapplicationsasynchronouslyreadthecontentsoffiles(orrawdatabuffers)storedontheuser‘scomputer,usingFileorBlobobjectstospecifythefileo 查看详情
js兼容各个浏览器的本地图片上传即时预览效果
...这方面的的问题,所以也就做了个简单的demo来实现本地上传图片即时预览效果。其在标准浏览器(firefox,chrome,IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果。在IE10以下浏览器用了滤镜来解决图片显示问题。在看代码... 查看详情
怎样在线预览word文档
...持.doc/.docx格式的Word文件。第一步(Step1):添加文件(上传需要预览的Word文件)上传有两种模式,一是本地上传需要转换的Word文档(选择待转换的Word文档),二是转换在线文档。两种上传模式都比较简单,在线文档需要使用... 查看详情
jquery实现上传图片及图片大小验证图片预览效果代码
jquery实现上传图片及图片大小验证、图片预览效果代码jquery实现上传图片及图片大小验证、图片预览效果代码上传图片验证*/ functionsubmit_upload_picture(){ varfile=$(‘file_c‘).value; if(!/.(g... 查看详情
html5文件上传前本地预览
HTML5之FileReader的使用HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调... 查看详情
本地上传图片预览
<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>图片上传本地预览,获得图片的base64(可压缩)</title><styletype="text/css">.uplo 查看详情
html5上传图片预览
笔记一下!!!<!DOCTYPEhtml><html><head><title>HTML5上传图片预览</title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><scriptsrc="http://www.codefans. 查看详情
java实现图片裁剪预览功能
...图片裁剪预览功能 在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章! 需要插件:jQuery Jcrop 后端代码:packageorg.csg.upload;importjava.awt.Rectangle;importjava.awt.p_w_picpath.BufferedImage;importjava.io.File; 查看详情
图片选择,预览及上传
记得以前老师教我们写项目,要实现图片上传的功能,我们都是先用一个input选好图片,然后单独做一个提交图片的按钮,点击按钮,使用form表单提交到后台,然后通过//获取上传的文件HttpPostedFileBasefile=Request.Files[0];这一行来获... 查看详情
jquery插件imgareaselect实例讲解一(头像上传预览和裁剪功能)
...先,要知道我们应该实现什么功能?(1)图片能够实现上传预览功能(2)拖拽裁剪图片,使其能够显示裁剪后的区域(3)显示要裁剪区域的坐标其次,该如何引用该插件呢? 那就具体看一下吧!第一步:先将样式和文... 查看详情
html5图片上传使用filereader预览
通过FileReader,和es6的方法解构赋值,promise对象简单封装上传预览具体逻辑:选中图片之后,触发onchange方法,获得上传文件对象,调用fileReader方法验证图片是否符合上传需求,符合返回图片文本,不符合返回错误信息。先介绍几... 查看详情
js上传图片本地预览缓存
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>文件上传</title><scriptsrc="jQuery.js"></script><styletype="text/css">#file{display:block;width: 查看详情
html5上传图片文件(含拖拽预览上传美化)
...https://github.com/younglaker微博:江小湖Laker上篇文章讲了如何上传文件。本文讲细分讲述图片上传、预览等。关于接口FileAPIFile-独立文件;提供只读信息,例如名称、文件大小、mimetype和对文件句柄的引用。FileList-File对象的类数组序... 查看详情
图片上传组件开发(代码片段)
我就要自行车-需求整理放眼WWW,一般的图片上传模块,主要就是实现了三个功能,图片的预览,图片的剪裁及预览,图片的上传,那我也就整这么一个吧,再细化一下需求。图片的预览用户使用:用户点击“选择图片”,... 查看详情
图片本地上传预览
在IE里面显示的话,你可以用div直接显示图片,不通过img来添加SRC,这样就不会有小图标出现例子:<divclass="banner_up_pic"id="imgPreDiv"></div>varfile_upl=document.getElementById("file"); file_upl.select(); 获取图片路径 varim 查看详情