fileupload控件上传图片,html图片上传按钮
一.背景和效果
目前网上上传最多的文件是图片文件，但是传统的网页图片截图上传需要：保存截图-选择路径-点击上传-选择路径-上传-保存后插入。
图片上传也需要：选择路径然后-上传-插入。步骤复杂，互联网体验才是王道。如果支持截图粘贴上传，拖拽上传会大大提升体验。
目前知乎和github都支持这两个针对现代浏览器的特性，闲来无事也要学会实现。今天就来说说这个1kb插件的功能，使用方法，原理。
首先看一下插入效果：
直接粘贴上传截图。
拖放
Http网络
二。使用示例
直接调用：XML/HTML代码将内容复制到剪贴板。divid= box style= width:800 px；高度：400pxborder:1 px solid；content editable= true /div script type= text/JavaScript src= upload image . js /script new upload image( box ， uploadhandler.ashx )。上传完成后upload(function(xhr){//回调varimg=new image()；img . src=xhr . responsetext；this . appendchild(img)；});AMD/CMD
XML/HTML代码将内容复制到剪贴板divid= box style= width:800 px；高度：400pxborder:1 px solid；content editable= true /div script type= text/JavaScript src= require . js /script script require([ upload image ]，Function(upload image){ new upload image( box ， uploadhandler.ashx )。上传完成后upload(function(xhr){//回调varimg=new image()；img . src=xhr . responsetext；this . appendchild(img)；});})/脚本
三。浏览器支持
当前版本仅支持以下浏览器，以后可能会支持更多浏览器。
IE11
铬合金
火狐浏览器
Safari(未经测试，理论应该支持)
四。原理及源代码1.粘贴上传 处理目标容器(id)的粘贴事件，读取e.clipboardData中的数据，如果是图片，进行如下处理：
使用H5文件API(FileReader)获取文件的base64代码，构造FormData异步上传。2.拖拽上传
处理目标容器(id)的drop事件，读取e.data transfer.files (H5文件API:文件列表)中的数据，如果是图片，构建FormData异步上传。
下面是初始版本代码，比较简单。没有更多的细节。
部分核心代码
XML/HTML代码将内容复制到剪贴板函数upload image (id，URL，key){ this . element=document . getelementbyid(id)；this.url=url//后端处理图片的路径this . img key=key PasteraiImgkey ；//name } upload image . prototype . paste=function(callback，formdata){ varthat hat=this；this . element . addevent listener( paste ，function(e){//处理粘贴事件if(e . clipboard datae . clipboard data . items[0].目标容器(id) {var that=this，reader=new filereader)file=e . clipboard data . items[0]的type . index( image )-1)。getas file()；//读取e.clipboardData中的数据：Blob object reader . onload=function(e){//读取完读取器后，xhr上传varxhr=newxmlhttprequest()，FD=formdata (new formdata())；xhr.open(POST ，thatthat.url，true)；xhr . onload=function(){ callback . call(即，xhr)；} FD . append(thithat . img key，this . result)；//this.result获取图片的base64 xhr . send(FD)；} reader.readAsDataURL(文件)；//Get base64 encoding} }，false)；}
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。