Ajax Upload文件上传插件 替代(<input type=”file” />)上传图片
1、Ajax Upload上传插件

浏览器迫使我们使用文件输入控件(<input type=”file” />)做上传，然而此控件的样式是不能修改的。此外，基于表单上传在流行的Ajax应用程序面前显得过时了。我们可以使用flash解决这个问题，但实际上JavaScript也能做的很出色。

Ajax Upload文件上传插件允许你上传多个插件而无需刷新页面，可以使用任何的元素来显示文件选择窗口。它可以在所有主流的浏览器下工作，从2.0版本开始，不需要任何库运行。Ajax Upload文件上传插件不会污染任何命名空间，所以它与jQuery，Prototypejs，mootools其他JavaScript库兼容。

Demo实例
下面是一个在jQuery下使用Ajax Upload插件的实例。

下载
版本3.6 发布于2009-03-10

问题，贡献和最新版本
该项目最近已经移到了GitHub，欢迎您去折腾它。也更愿意您使用“问题跟踪（issue tracker）”留下意见，错误报告和要求。您必须先要在GitHub上注册才行。

2、如何去使用它？

创建上载
首先，您需要创建一个按钮。（可以使用任意的元素）

<div id=”upload_button”>上传</div>
接下来，您应该创建Ajax上传实例。您可以使用以下代码创建最简单的形式：

// 您必须在 DOM 准备好之后在创建它
//在jquery下使用 $(document).ready
// prototype下为document.observe(“dom:loaded”
new AjaxUpload(‘upload_button_id’, {action: ‘upload.php’});
配置Ajax上传

new AjaxUpload(‘#upload_button_id’, {
// 服务器端上传脚本
// 注意: 文件不允许上传到另外一个域上
action: ‘upload.php’,
// 文件上传的名字
name: ‘userfile’,
// 发送的附加数据
data: {
example_key1 : ‘example_value’,
example_key2 : ‘example_value2′
},
// 筛选后提交文件
autoSubmit: true,
// 您希望从服务器返回的数据类型
// HTML (text) 和 XML 自动检测
// 当您使用JSON作为响应时很实用，在这种情况下就设置为 “json”
// 也要设置服务器端的响应类型为text/html, 否则在IE6下是不工作的
responseType: false,
// 文件选择后使用
// 当autoSubmit为disabled时很管用
// 您可以通过返回false取消上传
// @参数file为上传文件的文件名
// @参数extension为那个文件（后缀名）
onChange: function(file, extension){},
// 文件上传时调用
// 您可以通过设置返回false 取消上传
// @参数file为上传文件的文件名
// @参数extension为那个文件（后缀名）
onSubmit: function(file, extension) {},
// 当文件上传完成的时候调用
// 警告！不要使用”false”字符串作为服务器的响应
// @参数file 指上传的文件名
// @参数 response 指服务器的响应
onComplete: function(file, response) {}
});
注意：不要使用数据参数附加动态数据，就像“data: (txt:textfield.value）”，因为它将在AJAX Upload实例创建的时候分配数据且以后不会改变。如果你想文本框的传递的其他数据，使用在onSubmit回调函数中的SetData方法。

实例方法
*submit – 提交文件到服务器（当autoSubmit被禁用时有用）
*disable – 禁用上传按钮
*enable – 允许上传按钮
*destroy – 清理AjaxUpload对象
* setData(data) – 覆盖数据参数

//您可以使用这些方法来配置AJAX的上传
var upload = new AjaxUpload(‘#div_id’,{action: ‘upload.php’});
//例如当用户选择了一些东西，设置一些参数
upload.setData({‘example_key’: ‘value’});//或者您可以在事件函数中直接使用这些方法
new AjaxUpload(‘div_id’, {
action: ‘upload.php’,
onSubmit: function() {
//仅允许一个上传
this.disable();
}
});
});
3、如何访问上载的文件？
对于服务器端的代码，文件似乎是以简单的形式被上传，所以您可以使用任何您想用的语言。
您访问上传文件可以使用：
* PHP: $_FILES['userfile']
* Rails: params[:userfile]
请注意，’userfile’是”name”选项的默认值

您可以访问其他一些参数通过：
* PHP: $_POST['yourkey']
* Rails: params[:yourkey]

服务器端脚本
如果您使用的是PHP的，这里是一个简单的例子，我从PHP手册直接获得的。

$uploaddir = ‘/var/www/uploads/’;
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo “success”;
} else {
// 警告！不要使用字符串”FALSE”作为一个响应！
// 否则onSubmit 事件不会调用
echo “error”;
}

ColdFusion的文件上传。 （默认准系统解决方案）

<cffunction name=”uploadFile” access=”remote” output=”false”>
<cfargument name=”userFile”>
<cffile action=”upload” fileField=”userFile” destination=”directory/path/on/server/”>
<cfreturn “whatever”>
</cffunction>

这里是一个ASPX处理程序，请进行修改以满足您的需要：

using System;
using System.Web;
using System.IO;
public class FileHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string strFileName = Path.GetFileName(context.Request.Files[0].FileName);
string strExtension = Path.GetExtension(context.Request.Files[0].FileName).ToLower();
string strSaveLocation = context.Server.MapPath(“Upload”) + “” + strFileNa