首页 > Javascript > jQuery插件之Ajax Upload篇

jQuery插件之Ajax Upload篇

2009年3月9日
阅读评论 发表评论

使用jquery实现ajax无刷新上传是个老话题了, 网上也有很多针对jquery发布的插件, 下载了几个试用了试用, 推荐一下这个
Ajax Upload,方便快捷. 把原文简单的翻译了一下, 希望能对这方面感兴趣的朋友有所帮助.

使用方法:

建立uploader

使用如下语句建立上传按钮.

<div id="upload_button">Upload</div>

建立Ajax Uploader实例

使用如下代码

// You must create it only after the DOM is ready for manipulations
// Use $(document).ready for jquery
// document.observe("dom:loaded" for prototype
new AjaxUpload('upload_button_id', {action: 'upload.php'});
 
// 注: 如果我们使用的jquery框架, 我们可以这样加载Uploader
$(function(){
    new AjaxUpload('upload_button_id', {action: 'upload.php'});
})

配置Ajax Uploader

new AjaxUpload('#upload_button_id', {
  // 服务器端处理上传文件的脚本路径
  action: 'upload.php',
  // File upload name, 如在php中$_FILES['userfile']
  name: 'userfile',
  // 其他要同时post的数据
  data: {
    example_key1 : 'example_value',
    example_key2 : 'example_value2'
  },
  // Submit file after selection
  autoSubmit: true,
  // 文件被选择后触发
  // Useful when autoSubmit is disabled
  // You can return false to cancel upload
  // @param file basename of uploaded file
  // @param extension of that file
  onChange: function(file, extension){},
  // 文件被上传完成前触发
  // You can return false to cancel upload
  // @param file basename of uploaded file
  // @param extension of that file
  onSubmit: function(file, extension) {},
  // 文件上传完成后触发
  // @param file basename of uploaded file
  // @param response server response
  onComplete: function(file, response) {}
});

处理上传文件,在服务器端脚本中,我们可以通过下面的参数来获取上传文件

  • PHP: $_FILES['userfile']
  • Rails: params[:userfile]

userfile相当于html表单<input type=”file” name=”userfile” />中的name的值
其他参数的获取方法

  • PHP: $_POST['yourkey']
  • Rails: params[:yourkey]

服务器端脚本示例

php脚本

$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
 
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  echo "success";
} else {
  echo "error";
}

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") + "" + strFileName;
        context.Request.Files[0].SaveAs(strSaveLocation);
 
        context.Response.ContentType = "text/plain";
        context.Response.Write("success");
    }
 
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

配置只允许上传指定格式的文件

我们可以在onSubmit回调函数中处理指定格式,如果不是正确的格式则return false来取消上传.

new AjaxUpload('#button2', {
        action: 'upload.php',
	onSubmit : function(file , ext){
		if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
			// extension is not allowed
			alert('Error: invalid file extension');
			// cancel upload
			return false;
		}
	}
});

大概用法就是这样了, 更详细的介绍可以参考本页首的连接.

admin Javascript

  1. mamaloveu
    2010年6月8日18:26 | #1
    回复 | 引用

    您好 我想知道显示哪些程序代码的时候,您是用的wordpress的什么插件?能共享下么?我找了几个好像都不好用,是http://code.google.com/p/syntaxhighlighter/ 么? 谢谢

  1. 本文目前尚无任何 trackbacks 和 pingbacks.