`
leiwuluan
  • 浏览: 707141 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

本地上传图片预览,并客户端判断文件大小和文件格式

阅读更多

一个上传图片立马能看到预览图的效果 预览的图还是直接在客户端操作而不是先上传到服务器之后再返回URI的方式。查了相关的资料之后发现有一些现成的方法,但是对于浏览器的兼容性都不好,有的只支持IE6  有的只支持FF。于是自己动手写了这么一个demo。并且支持客户端判断文件大小和文件格式。
其实原理就是通过各种版本的浏览器实行不同的实现机制。
http://www.lianglong.org/article/181.html

分享到:
评论
2 楼 hushhui 2011-11-17  
谢谢,要的就是这个效果!!!!
1 楼 ydc919 2011-02-24  
谢谢。。。

相关推荐

    图片上传-有去重功能

    1. **图片上传**:图片上传是指用户可以通过Web页面将本地的图片文件上传到服务器的过程。通常涉及到前端的文件选择、预览和上传逻辑,以及后端的文件接收、存储和响应。 2. **基于WeUI**:WeUI是一个针对微信Web...

    Java实现图片上传到服务器并把上传的图片读取出来

    在Java Web开发中,实现图片上传到服务器并读取的过程涉及到多个步骤,包括客户端与服务器端的交互、文件上传处理、数据库操作以及图片的显示。以下是对这一过程的详细解释: 1. **客户端与服务器端交互**: - ...

    立即显示选择的上传图片

    调用`FileReader`的`readAsDataURL()`方法读取文件为Base64编码的URL,最后将这个URL赋值给`<img>`元素的`src`属性,实现图片预览。 3. **Base64编码**:在JavaScript中,`readAsDataURL()`方法读取文件后返回的...

    【JavaScript源代码】js实现头像上传并且可预览提交.docx

    if (size >= 1 * 1024 * 1024) { // 判断文件大小 info.innerHTML = '文件大于1兆不行!'; preview.style.backgroundImage = ''; $('#test-image-preview').addClass('icon-bianjitouxiang'); return false; } ...

    KODExplorer 芒果云-资源管理器

    - 文件大小为0上传不了问题 - windows下进入某些系统文件夹死循环bug解决 - tips 居中显示 - 任务栏标签选中问题:已经显示且为交点窗口 点击——隐藏;否则——显示,并且置为焦点窗口 - 拖入url ——oexe 新...

    迅雷FTP资源探索器

    3. **文件预览**:提供文件预览功能,用户无需下载即可查看文本文件、图片等部分内容,便于判断是否需要下载。 4. **批量下载**:迅雷FTP资源探索器继承了迅雷的多线程下载技术,支持批量下载文件,提高下载速度和...

    简单灰色的电脑公司博客网页模板2474_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    用户在使用时,需要将这些文件上传到服务器或者在本地环境中进行预览和修改。 总的来说,这个模板提供了一个基础的框架,让电脑公司的博客网站可以快速搭建起来,并且具有良好的用户体验。设计师或开发者可以根据...

    《程序天下:JavaScript实例自学手册》光盘源码

    19.4 使用正则判断文件扩展名 19.5 多附件上传效果 19.6 上传控件内容清空 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 JavaScript导出数据到...

    程序天下:JavaScript实例自学手册

    19.4 使用正则判断文件扩展名 19.5 多附件上传效果 19.6 上传控件内容清空 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 JavaScript导出数据到...

    微信小程序-在线文档功能

    微信小程序提供了wx.saveFile和wx.getSavedFile接口来处理本地文件,而文件上传通常借助微信云开发的云存储服务,如云存储桶。通过API将用户上传的文件保存到云端,并返回文件URL,供后续访问和下载。 八、用户体验...

    web-simplest-file-uploader

    这可以通过JavaScript在客户端进行检查,例如使用`file.type`判断文件类型,`file.size`获取文件大小。 7. **错误处理**:良好的错误处理机制是必不可少的,包括处理网络问题、服务器返回的错误码以及用户取消操作...

    C#编程经验技巧宝典

    104 <br>0171 如何只允许输入指定图片格式 105 <br>0172 如何设置录入图片统一图片大小 105 <br>5.4 数组处理技巧 105 <br>0173 如何转换数组类型 105 <br>0174 如何复制数组中一系列元素的...

    超实用的jQuery代码段

    7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停时的图片放大 7.22 淡出...

Global site tag (gtag.js) - Google Analytics