js上传本地图片遇到的问题
2016-10-28 16:00
323 查看
1.改变页面文件上传默认的样式
<input type="text" size="20" id="upfile" style="border:1px dotted #ccc"> <input type="button" value="浏览" onclick="file.click()" style="border:1px solid #ccc;background:#fff"> <input type="file" id="file" name="file" style="display:none" onchange="upfile.value=this.value">
2.校验文件类型为图片
/** * @description 校验文件类型是否是图片文件 * @param file_id 图片文件选择对应的id */ function validateFileType(file_id) { try { var filePath = $("#"+file_id+"").val() ; //获取文件路径 var extStart = filePath.lastIndexOf(".") ; var ext = filePath.substring(extStart, filePath.length).toUpperCase() ; //获取文件拓展名 //判断文件是否是图片文件 if(ext !=".JPG" && ext != ".PNG" && ext != ".BMP" && ext != ".DIF" && ext != ".JPEG"){ return false; } return true ; } catch (e) { // TODO: handle exception alert('错误','校验图片类型异常','error') ; } }
3.获取文件大小
/** * @description 获取图片文件大小 * @param file_id 图片文件选择对应的id * @returns fileSize 图片文件大小(单位为byte) */ function getFileSize(file_id) { try { var fileInput = $("#"+file_id+"")[0] ; var fileSize = fileInput.files[0].size ; return fileSize ; } catch (e) { // TODO: handle exception alert('错误','获取文件大小异常','error') ; } }
4.本地图片预览(于chrom浏览器而言)
chrome不能直接获取所上传图片的本地路径(实际获取的是一个虚拟路径),故不可以直接给img的 src 赋值来实现图片预览。通过FileReader来解决:
//查看图片 $("#showPicture").click(function(){ var reader = new FileReader(); reader.readAsDataURL($("#file")[0].files[0]); reader.onload = function(evt){ var imgSrc = evt.target.result; $("#picture").attr("src", imgSrc) ; } ; return false ; }) ;
5.关于图片的等比例显示
/** * @description 图片大小自适应 * @param maxWidth: 最宽限; maxHeight: 最高限; width: 图宽; height: 图高 * @returns param */ function pictureFit_auto( maxWidth, maxHeight, width, height ){ //图片返回信息 var param = {top:0, left:0, width:width, height:height}; if(width > height){ //宽 > 高 param.width = maxWidth-4 ; param.height = (param.width/width)*height ; param.left = 2; param.top = Math.round((maxHeight - param.height) / 2); }else{ param.height = maxHeight-4 ; param.width = (param.height/height)*width param.left = Math.round((maxWidth - param.width) / 2); param.top = 2; } return param; }
相关文章推荐
- struts整合dropzone.js上传图片遇到的点问题
- 今天再做上传图片时候遇到了一个JS 图片预览问题
- 今天再做上传图片时候遇到了一个JS 图片预览问题
- 用js实现预览待上传的本地图片
- 上传图片后用JS返回值的问题
- 解决kindeditor与Struts2框架整合时无法上传本地图片的问题 (2)
- ueditor1_2_6_1-utf8-net传解决本地图片上传失败问题
- 解决kindeditor与Struts2框架整合时无法上传本地图片的问题 (1)
- 解决kindeditor与Struts2框架整合时无法上传本地图片的问题
- JS实现上传本地图片前先预览
- kindeditor与Struts2框架整合时无法上传本地图片的问题讲解
- 用js实现预览待上传的本地图片
- IE7在图片上传时,无法预览本地图片的问题解决方法
- js 上传图片预览问题
- JS实现图片上传时的本地预览,兼容IE和firefox谷歌
- 用js实现预览待上传的本地图片
- JS预览上传图片发现的问题
- FckEditor使用时遇到的两个问题,未能加载xxxx和上传图片无响应的解决方法
- 通过 Socket 发送 Http协议 上传图片到速卖通服务器过程中遇到的一些小的问题 总结
- asp.net上传图片所遇到的问题