本文实例展示了JavaScript判断文件上传类型的方法,是一个非常常用的技巧。具体实现方法如下: 文件上传时用到一个功能,使用html元素的input标签实现:选中图片后立即触发onchange事件上传图片,但是重复选择相同的图片不会触发onchang事件,解决办法如下:function imageSubmit(obj, imageType) { if (imageType == "0") { //相关处理代码... //解决上传相同图片不触发onchange事件var nf = obj.cloneNode(true);nf.value=''; ob...
在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意。要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的。幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下:By:DragonDean//下面用于图片上传预览功能 function setImagePreview(avalue) { var docObj=document.getElementBy...
代码很简单,常见的图片格式均已加入验证之中,小伙伴们可以直接拿去用的。 废话少说,直接上代码代码如下: $(document).ready(function(){$("#form01").change( function(){var filepath=$("input[name='myFile']").val();var extStart=filepath.lastIndexOf(".");var ext=filepath.substring(extStart,filepath.length).toUpperCase();if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){alert("图片限于bmp...
最近项目中出现上传文件返回的json数据会被提示下载,只有在ie10+中才会出现这个问题。前端使用jQuery的插件ajaxForm提交表单,后台返回的数据格式为json。代码如下:后端Python:代码如下: def jsonp(func):"""Wraps JSONified output for JSONP requests."""@wraps(func)def decorated_function(*args, **kwargs):callback = request.args.get(callback, False)temp_content = func(*args, **kwargs)if isinstance(temp_content...
论坛或者贴吧经常会需要分享很多图片,上传图片比较差的做法是上传到中央服务器上,中央服务器再转发给静态图片服务器。而这篇文章讲介绍如何使用plupload对上传过程进行优化,并绕过服务器直接批量上传图片到又拍云上的方法。本文集中会讲到以下几个重点:代码如下: plupload库 图片的本地压缩 多选图片 绕过服务器直接批量上传图片到又拍云 使用又拍的HTTP FORM API plupload的配置 plupload库 plupload是一个支持非常丰富的图片...
文件上传是网站常用的功能,例如附件或图片的上传功能,解决方案也有很多,我们今天介绍一种通过jQuery无刷新的文件上传方式。 首先,我们在页面中放一个form,用来上传文件:代码如下:然后,在页面中放一个iframe,在上传的时候只刷新iframe,而不是整个网页:代码如下:接下来使用js为按钮添加功能:代码如下: $(function () {$("#btnUpload").click(function () {$("#myForm").submit();});});在按钮单击的时候,将form提交。 这...
本节我们将实现,用户上传图片,并将该图片在浏览器中显示出来。 这里我们要用到的外部模块是Felix Geisendrfer开发的node-formidable模块。它对解析上传的文件数据做了很好的抽象。 要安装这个外部模块,需在cmd下执行命令:代码如下: npm install formidable如果输出类似的信息就代表安装成功了:代码如下: npm info build Success: formidable@1.0.14安装成功后我们用request将其引入即可:代码如下: var formidable = require(...
这个插件主要针对哪些用户? 1.空间小想做下载服务器的用户,既没有足够的带宽,又没有足够大的空间,我们这个怎么弄呢?将我们的网站做成中间层,然后用户上传到服务器其实就上传到了七牛云存储,下载也是等同于在七牛下载,即省了空间又省了带宽,解决了小空间不能做下载站的可能! 2.我本身服务器很好,但是有时候用户上传只有几K的速度往上走,这个不乏有ISP的限制成64KB,但是达不到就几K,这个真实存在的,我们也用这个做上传...
本文实例讲述了jQuery统计上传文件大小的方法。分享给大家供大家参考。具体如下: 对于现代浏览器(支持html5)来说,在客户端统计上传文件的大小,可以通过$(selector)[0].files[0].size来实现。但在老版本的IE浏览器中,比如IE7,IE8或IE9,却不支持这种做法,但可以借助ActiveXObject对象来实现。代码如下:@section scripts {$(function() {$('#g').on("click", function() {getFileSize("f");});});function getFileSize(eleId) {...
本文实例讲述了限制上传文件大小和格式的jQuery插件。分享给大家供大家参考。具体分析如下: 在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且功能强大,但美中不足的是:有时候会碰到浏览器兼容问题。本篇就来写一个"原生态"的jQuery插件,使之能限制上传文件的大小和格式。 首先,写一个名称为checkFileTypeAndSize.js的插件。通过判断当前文件的后缀名是否被包含在...
关于File API这里就不详细解释了,小伙伴们自行度娘吧,来我们就要利用文件句柄来读取文件内容,这是通过FileReader来实现的,通过FileReader接口,我们可以异步地将文件内容加载到内存中,赋予某个js变量。代码如下: function getImgSrc(target, callback) {if (window.FileReader) {var oPreviewImg = null, oFReader = new window.FileReader();oFReader.onload = function (oFREvent) {oPreviewImg = new Image();var type = t...
kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用nodejs更简单 环境: unbuntu 14.10 nodejs 0.10.35 express 4.11.2 formidable 1.0.16 kindEditor 4.1.10 webStorm 8 1.通过IDE或终端创建一个名称为test的工程 2.编辑package.json添加formidable依赖,这里使用的是1.0.16版本,之后通过终端执行npm install完成依赖的安装 3.将kindEditor整个目录放...
前言:项目中经常用到需要上传文件、照片等功能,同时需要限制所上传文件的大小。很多插件都会采用后台请求验证,前端Js校验比较少。本篇介绍一个前端JS便捷判断上传文件大小的方法。代码很简单,关键就是怎么用JS拿到文件然后获取文件大小,进而去判断拦截。由于各种历史原因,IE的ActiveX控件因素,获取文件的方法可能和其他浏览器有所不同,所以只需稍加判断即可。 JS代码:代码如下:// 判断是否为IE浏览器: /msie/i.test(navi...
本文实例讲述了js实现上传图片预览的方法。分享给大家供大家参考。具体实现方法如下:代码如下:function PreviewImage(imgFile) {var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);filextension=filextension.toLowerCase();if ((filextension!=.jpg)&&(filextension!=.gif)&&(filextension!=.jpeg)&&(filextension!=.png)&&(filextension!=.bmp)){alert("对不起,系统仅支持标准格...
解决了uploadify插件在chrom频繁崩溃的问题,又遇到了新问题,ff浏览器下报HTTP 302错误, ff浏览器下 uploadify 利用flash进行post上传时没有包含原来的session信息,而是重新创建了一个session,新的session无法通过登录验证,因此被重定向到了登录页面。 解决的方法无非就是将原session一起post到服务器端,然后服务器端登录验证之前将需要验证的session改为post过来的那个。。。(语言组织能力太差—,—)。 jquery.uploadify...