jQuery插件之Ajax Upload篇

最新推荐文章于 2021-03-04 08:18:11 发布

lmzpp

最新推荐文章于 2021-03-04 08:18:11 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： upload jquery插件 ajax extension file function

本文链接：https://blog.youkuaiyun.com/lmzpp/article/details/5876238

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用jQuery插件实现Ajax Upload功能，包括创建uploader、实例化Ajax Uploader、配置上传限制以及处理服务器端脚本。示例中展示了PHP和ASPX的服务器端处理代码，并提供了解析上传文件和限制文件格式的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用方法:

建立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;
		}
	}
});