html实现图片上传到浏览器并显示 html实现图片上传到浏览器并显

方法一
【html实现图片上传到浏览器并显示】利用原生js实现图片上传
上传文件时，需要设置请求头，一般请求头是json格式，一般文件的请求数据是formdata类型，所以需要设置请求头Content-Type：multipart/form-data；charest=UTF-8
html

文章图片

//图片上传到浏览器并显示 function ProcessFile(e) { var file = document.getElementById('chooseImage0').files[0]; console.log(file); var reader = new FileReader(); if (file) { reader.onload = function (event) { var txt = event.target.result; $("#cropedBigImg0").attr('src', txt); //将图片base64字符串赋值给img的src //console.log(txt)//base64 }; } reader.readAsDataURL(file); }function contentLoaded() { document.getElementById('chooseImage0').addEventListener('change', ProcessFile, false); }// var model=document.getElementById('model'); // var input=model.querySelectorAll('input'); window.addEventListener("DOMContentLoaded", contentLoaded, false);

方法二
利用外部框架layui实现图片上传，
layui在此可以不需要调用layui的css样式，引用上传图片的功能只需要引用layui.js即可，注意引用layui.js最好是本地引用
js

layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; //普通图片上传 var uploadInst = upload.render({ elem: '#chooseImage0' ,url: '/upload/' ,before: function(obj){ //预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ $('#cropedBigImg0').attr('src', result); //图片链接（base64） }); } ,done: function(res){ //如果上传失败 if(res.code > 0){ return layer.msg('上传失败'); } //上传成功 } ,error: function(){} }); })

html