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;
}

js上传本地图片遇到的问题的更多相关文章

  1. KindEditor上传本地图片在ASP.NET MVC的配置

    http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. ...

  2. .net mvc4 利用 kindeditor 上传本地图片

    http://blog.csdn.net/ycwol/article/details/41824371?utm_source=tuicool&utm_medium=referral 最近在用k ...

  3. tinymce4.x 上传本地图片(自己写个插件)

    tinymce是一款挺不错的html文本编辑器.但是添加图片是直接添加链接,不能直接选择本地图片. 下面我写了一个插件用于直接上传本地图片. 在tinymce的plugins目录下新建一个upload ...

  4. tinymce4.x 上传本地图片 (转载)

    转载自:http://www.cnblogs.com/fhen/p/5809514.html tinymce4.x 上传本地图片   tinymce是一款挺不错的html文本编辑器.但是添加图片是直接 ...

  5. 个人永久性免费-Excel催化剂功能第102波-批量上传本地图片至网络图床(外网可访问)

    自我突破,在100+功能后,再做有质量的功能,非常不易,相对录制视频这些轻松活,还是按捺不住去写代码,此功能虽小,但功课也做了不少,希望对真正有需要的群体带来一些惊喜. 背景介绍 图床的使用,一般是写 ...

  6. js上传压缩图片

    原文链接:http://blog.csdn.net/iefreer/article/details/53039848 手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力. 因此在某些应用下( ...

  7. [原创]Python/Django使用富文本编辑器XHeditor上传本地图片

    前言 为了在Django框架下使用Xheditor上传图片,居然折腾了我一个晚上.期间也遇到种种问题,网上相关资料极少.现在把经验分享给大家. 正文 xheditor篇 1.下载http://xhed ...

  8. JS实现上传本地图片前先预览

    <style type="text/css"> #preview /*这个就是预览的DIV的ID*/ { filter:progid:DXImageTransform. ...

  9. html5上传本地图片,在线预览及裁剪(filereader,canvas)

    1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewIm ...

随机推荐

  1. 国际化模块 angular-translate 简单方便快捷翻译中英文等多语言环境

    很多web服务面对的不仅仅是当地用户,多语言环境不仅能提升逼格,更重要是一种用户体验. angular.js 作为前后端拆分的解决方案之一,当然离不开前端框架处理国际化的问题,angular.js 官 ...

  2. 关于TcpClient,Socket连接超时的几种处理方法

    用TcpClient做通信的时候,经常发现网络连接不通的时候,代码就卡死在那里,TcpClient竟然没有超时的设定 泪奔啊 看来微软不是把所有工具准备得妥妥当当的啊 没办法 现在用线程来包装一下这个 ...

  3. 批处理学习笔记12 - 拷贝大文件到特定目录 Copy命令

    ~z 获取文件容量大小,配合变量使用 copy 拷贝命令, copy 原地址 新地址 ok,下面上代码 @echo off setlocal enabledelayedexpansion for %% ...

  4. 在ModelSim中添加Xilinx仿真库

    在ModelSim中添加Xilinx仿真库 说明: l ModelSim一定要安装在不带空格的目录下,即不要安装在“Program Files”目录下.如作者是安装在D:\softwares\Mode ...

  5. 【Android】11.3 屏幕旋转和场景变换过程中GridView的呈现

    分类:C#.Android.VS2015: 创建日期:2016-02-21 一.简介 实际上,对于布局文件中的View来说,大多数情况下,Android都会自动保存这些状态,并不需要我们都去处理它.这 ...

  6. JIT编译器

    深入理解Java Class文件格式(九) http://blog.csdn.net/zhangjg_blog/article/details/22432599 http://blog.csdn.ne ...

  7. SDL2中文教程

    SDL2.0 Tutorial Index 原文地址:SDL 2.0 Tutorial Index Welcome! 下面的教程旨在为你提供一个SDL2.0以及c++中游戏设计和相关概念的介绍.在本教 ...

  8. 解决NSImage绘制的时候图像模糊

    Mac下NSImage绘制模糊的原因之一是draw到了非整数像素上,框架在渲染的时候就会模糊. 针对这一原因写了以下工具: /** * @brief 一劳永逸的解决NSImage绘制的时候绘到浮点值像 ...

  9. c++ 使用vs2010调用 win32api

    以前读书时都是用vc6.0.后来学c#用vs.装系统只装了vs2010.今天用vs2010写c++程序.发现有点陌生.就总结下,免得以后忘记. 首先用vs2010选择c++语言.新建一个win32控制 ...

  10. 【linux】Shell脚本启动程序

    Linux 下后台脚本启动Jar程序 Nohup后台输出运行日志 cd /home/zeze/jar/WeiboPost java -jar WeiboAutoPost.jar ../configur ...