使用jQuery 实现图片的上传以及预览效果,
<!DOCTYPE HTML>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //判断是否为图片格式并且大小合适 $('#imgOne').change(function () { //将支持的图片格式放在数组里面 var trueType = new Array('jpg', 'gif', 'png'); //获取上传文件的格式,文件的后缀名 var fileType = $(this).val().substring($(this).val().lastIndexOf('.') + 1); var fileSize = this.files[0].size; //判断上传文件类型是否在数组中 var inOrOut = $.inArray(fileType,trueType); if(inOrOut == -1){//不在数组中 $('#msg_img').css('color','red'); $('#msg_img').html('图片格式必须为jpg/gif/png'); }else{ //判断上传文件大小 var size = fileSize / 1024; if(size > 300){ $('#msg_img').css('color','red'); $('#msg_img').html('上传图片大小不能超过10M!'); }else{ $('#msg_img').html('') //显示图片 preImg(); } } }); }); /** * 获取上传路径 */ function getFileUrl(sourceId) { var url; if (navigator.userAgent.indexOf("MSIE")>=1) { // IE url = document.getElementById(sourceId).value; } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; } /** * 在一定位置显示图片 */ function preImg() { var url = getFileUrl($('#imgOne').attr('id')); var imgPre = document.getElementById('imgPre'); imgPre.src = url; } </script> </head> <body> <h2>上传图片并显示出来</h2> <input type="file" name="imgOne" id="imgOne"/> <span id="msg_img"> </span> <img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> </body> </html>
图片上传及预览效果
最新推荐文章于 2019-09-11 15:02:46 发布