html5点击上传图片,html图片向上移动代码

　　html5点击上传图片,html图片向上移动代码

　　事不宜迟，就说今天给大家分享的是html5上传的图片吧。我们在移动端使用它，但这个在pc上也是普遍兼容的。我只在谷歌测试过。之前用过的Angular，写的是《用HTML5的File API做上传图片预览能》。今天抛弃棱角分明的东西，分享一个html5 js图片上传案例。所以今天就按照一定的步骤来说吧。

　　HTML第一步是创建html。我们在页面里放了一个文件选择的input # upload(PS:偷懒，这里就不再写案例了。我们直接复制了我们的页面)

　　代码将内容复制到剪贴板div class= con 4 span class= btnuppload upload input type= file class= upload _ pic id= upload //span/divCSS注意：css有点乱。看不懂就问我，还是自己写就好了。

　　代码将内容复制到剪贴板内容{宽度：%；高度：自动；溢出：隐藏；边距：% autoauto颜色：# FFFFFF} con.btn{宽度：%；高度：px；行高：px；文本对齐：居中；背景：# dbc显示：块；字体大小：px；边框-半径：px；}上传{ float:left；位置：相对；}上传_pic{显示：阻止；宽度：%；高度：px；位置：绝对；左：顶部：不透明度：边框-半径：px；}Javascript

　　通过getElementById获取节点，判断浏览器的兼容性。对于不支持FileReader接口的浏览器，会给出提示并禁止输入，否则会监控输入的变化事件。

　　代码将内容复制到剪贴板//获取上传按钮varinput=document . getelementbyid( upload )；if(type of FileReader== undefined ){//result . innerhtml=对不起，您的浏览器不支持FileReader ；input.setAttribute(disabled ， disabled )；} else { input . addevent listener( change ，readFile，false)；}然后，当file_input的change事件被触发时，调用函数readFile()。在readFile中，我们首先获取File对象，然后通过file的type属性检测文件类型。当然，我们只允许选择图像类型的文件。然后，我们创建一个FileReader实例，并调用readAsDataURL方法来读取选定的图像文件。最后，在onload事件中，我们获得成功读取的文件内容，并通过插入一个img节点显示选中的图像。

　　代码将内容复制到剪贴板function readfile(){ varfile=this . files[]；如果(！/image \/\ w/。test (file.type)) {alert(文件必须是图片！);返回false；} varreader=new filereader()；reader.readAsDataURL(文件)；//文件读取成功，就可以调用上传接口，想发到哪里就发到哪里(PS:可以偷偷把你的美照发给我！)reader . Onload=function(e){ vardata=this . result . split(，)；vartp=(file.type==image/png )？png : jpg ；vara=data[]；//需要上传到服务器的可以在这里做ajax请求.}};这里我们已经完成了上传图片的功能。如果有兴趣，请亲自尝试。如果你不明白，或者我弄错了，请打电话给我。FileReader的方法和事件