新年礼，提供简单、易套用的 jQuery AJAX 上传示例及代码下载。后台对文件的上传及检查，以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP)。 有时做一个网站项目 (不论是否 ASP.NET)，内附的 FileUpload 控件，功能不足 (页面必须刷新、不支援 AJAX)，或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观)。网路上虽已有许多可用的示例，如： jQuery File Upload，但功能太强大、外观复杂，欲仅取出部分功能来引用，反而不易。...
解决了uploadify插件在chrom频繁崩溃的问题，又遇到了新问题，ff浏览器下报HTTP 302错误， ff浏览器下 uploadify 利用flash进行post上传时没有包含原来的session信息，而是重新创建了一个session，新的session无法通过登录验证，因此被重定向到了登录页面。 解决的方法无非就是将原session一起post到服务器端，然后服务器端登录验证之前将需要验证的session改为post过来的那个。。。（语言组织能力太差—，—）。 jquery.uploadify...
今天我给大家分享的是在不刷新页面的前提下，使用PHP+jQuery+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片，然后图片自动上传到服务器上并展示在页面上。HTML 我们在页面上放置一个form表单，使用post提交到后台php处理程序upload.php，注意enctype属性设置要支持文件上传。#preview用来显示上传完毕后的图片。关于css样式设置本文不加说明，请参照下载包的源码。代码如下: 最大100KB，支持jpg，gif，png格式。 jQue...
ajaxFileUpload是一个异步上传文件的jQuery插件。传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUpload([options])options参数说明： 1、url 上传处理程序地址。 2，fileElementId 需要上传的文件域的ID，即的ID。 3，secureuri 是否启用安全提交，默认为false。 4，dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写，...
网页端 裁剪图片，不需要经过服务器。 这个是用 https://github.com/mailru/FileAPI 框架实现的。配合jcrop. 高级浏览器 使用 canvas 裁剪，ie6 7 8使用 flash过度。 核心代码：var el = $('input').get(0);seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){FileAPI.event.on(el, 'change', function (evt){var files = FileAPI.getFiles(evt); // Retrieve file listFileAPI.filterFil...
首先按下面的步骤来实现一个简单的上传功能。 1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。 2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。 3 在项目中添加UploadFile文件夹，用来存放上传的文件。 进行完上面三步后项目的基本结构如下图:4 Default.aspx的html页的代码修改如下：Uploadify$(document).ready(function(){$("#uploadify").uploadify({'uploader': 'JS/jquery.up...
一、ajaxFileUpload是一个异步上传文件的jQuery插件。 传一个不知道什么版本的上来，以后不用到处找了。 语法：$.ajaxFileUpload([options]) options参数说明： 1、url 上传处理程序地址。 2，fileElementId 需要上传的文件域的ID，即的ID。 3，secureuri 是否启用安全提交，默认为false。 4，dataType 服务器返回的数据类型。可以为xml,script,json,html。如果...
在服务器端做文件上传的过程中，如果使用web服务器短端的上传控件去上传文件的话，会导致页面刷新一次，这样对用户的体验就不是很友好了。ajaxfileupload.js是一款jQuery的异步上传文件插件，使用简单且容易上手。 前置条件：ajaxfileupload.js文件，百度下载一个就行。 JS引用：代码如下:html代码：代码如下:JS代码：代码如下: function saveCInfo() {var filename = document.getElementById("fileToUpload").value;if (filename...
方法一：$('input[type="file"]').on('change', function() {var reg = /[^\\\/]*[\\\/]+/g; //匹配文件的名称和后缀的正则表达式var name = $(this).val().replace(reg, '');var postfix = /\.[^\.]+/.exec(name);//获取文件的后缀var text =name.substr(0,postfix['index']);//获取没有后缀的名称// 检测上传文件});方法二：以下只是个例子，变量file可以是任意类似于网络路径的字符串，这个例子是获得name=file的对象传过来的文...
案例：无标题文档function look() {//alert($("form input[type=file]").val())alert($("input[name=test]").upload("getFileVal"))}function clean() {$("input[name=test]").upload("clean")}function ajaxSubmit() {$("input[name=test]").upload({url: 'index.aspx',// 其他表单数据params: { name: 'pxblog' },// 上传完成后, 返回json, textdataType: 'json',onSend: function (obj, str) { return true; },// 上传之后回调o...
1.利用Jquery使用HTML5的FormData属性实现对文件的上传在HTML5以前我们如果需要实现文件上传服务器等功能的时候，有时候我们不得不依赖于FLASH去实现，而在HTML5到来之后，我们很容易的实现对文件的上传，只需要利用HTML5的一个FormData属性，结合Jquery就很容易实现文件的上传，而且读取文件的上传进度，下面这个上传案例就是基于上面所说的实现的，下面我将所所有的JS和CSS以及HTML页面代码放在下面。注意事项：FormData属性必须...
本文实例讲述了jquery实现图片上传之前预览的方法。分享给大家供大家参考。具体实现方法如下：/* *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法; *使用方法: 把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件 $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Ca...
一、jquery uploadify自我介绍：(1)、大家好，我是jquery插件大家族中负责实现异步上传的插件，我不是唯一，只是较好用的一款。(2)、我的功能：支持单文件或多文件上传，可控制并发上传的文件数在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java……通过参数可配置上传文件类型及大小限制通过参数可配置是否选择文件后自动上传易于扩展，可控制每一步骤的回调函数(onSelect, onCancel……)通过接口参数和CSS控制外观Uploadif...
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了，今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子，具体细节如下。 最近呢，一个项目做一个进度条的效果出来，这个之前还真没做过。刚好这周没什么东西了，就拿这个来充一下数吧。 文件上传，得先准备一个“按钮”：这个看上去还是不错的吧，实现也是很简单的：开始上传文件 太丑了，就用span来做了，可控性强。添加点css: .upload-span{display: inline...
本文实例讲述了jQuery+HTML5实现图片上传前预览效果。分享给大家供大家参考。具体如下： 这里主要是使用HTML5 的File API,建立一個可存取到该file的url，一个空的img标签，ID为img0,把选择的文件显示在img标签中，实现图片预览功能。请选择支持HTML API的浏览器，比如谷歌Chrome和火狐等。 运行效果如下图所示：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-codes/ 具体代码如下：HTML5上传...