0

0

一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子_jquery

php中文网

php中文网

发布时间:2016-05-16 16:43:12

|

1617人浏览过

|

来源于php中文网

原创

jquery插件ajaxfileupload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用ajaxfileupload插件的方法,然后再了解一些常见的错误信息和解决方法。

使用说明

需要使用jQuery库文件 和AjaxFileUpload库文件

使用实例

一,包含文件部分

火山翻译
火山翻译

火山翻译,字节跳动旗下的机器翻译品牌,支持超过100种语种的免费在线翻译,并支持多种领域翻译

下载
复制代码 代码如下:



二,HTML部分

复制代码 代码如下:

一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子_jquery


只需要三个元素,一个动态加载小图标、一个文件域和一个按钮
注意:使用AjaxFileUpload插件上传文件可不需要form,如下:


……相关html代码……

因为AjaxFileUpload插件会自动生成一个form提交表单。

对于file文件域ID和name,ajaxFileUpload插件fileElementId参数需要获取文件域ID,如果处理上传文件操作就需要知道文件域name,以便获取上传文件信息,这两者关系一定要清楚。

三,javascript部分

 

主要参数说明:
1,url表示处理文件上传操作的文件路径,可以测试URL是否能在浏览器中直接访问,如上:upload.php
2,fileElementId表示文件域ID,如上:fileToUpload
3,secureuri是否启用安全提交,默认为false
4,dataType数据数据,一般选json,javascript的原生态
5,success提交成功后处理函数
6,error提交失败处理函数

上面有两个方法,一个动态加载小图标提示函数loading()和ajaxFileUpload文件上传$.ajaxFileUpload()函数,这与我们使用jQuery.ajax()函数差不多,使用很简单,这里我省略了PHP处理上传文件,使用jQuery插件 AjaxFileUpload实现ajax文件就这么简单。

同时我们需要了解相关的错误提示

1,SyntaxError: missing ; before statement错误
如果出现这个错误就需要检查url路径是否可以访问

2,SyntaxError: syntax error错误
如果出现这个错误就需要检查处理提交操作的PHP文件是否存在语法错误

3,SyntaxError: invalid property id错误
如果出现这个错误就需要检查属性ID是否存在

4,SyntaxError: missing } in XML expression错误
如果出现这个错误就需要检查文件域名称是否一致或不存在

5,其它自定义错误
大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。

使用jQuery插件AjaxFileUpload实现无刷新上传文件非常实用,由于其简单易用,因些这个插件相比其它文件上传插件使用人数最多,非常值得推荐。
 
处理页面:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

public partial class web_ajax_FileUpload : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {
  HttpFileCollection files = HttpContext.Current.Request.Files;


  //if (files[0].ContentLength > 5)
  //{
  // Response.Write("{");
  // Response.Write("msg:'" + files[0].FileName + "',");
  // Response.Write("error:'文件上传失败'");
  // Response.Write("}");
  //}
  //else
  //{
  // Response.Write("{");
  // Response.Write("msg:'没有文件被上传',");
  // Response.Write("error:'文件上传失败'");
  // Response.Write("}");
  //}
  files[0].SaveAs("d:/adw.jpg");
  Response.Write("{");
  Response.Write("msg:'a',");
  Response.Write("error:''");
  Response.Write("}");

  //Response.Write("{");
  //Response.Write("msg:'ggg\n',");
  //Response.Write("error:'aa\n'");
  //Response.Write("}");
  Response.End();
 }
}

其它网友的补充:

页面代码:

复制代码 代码如下:


   
   
     

   
     
   
 


     
 
       
       
   

   

   
 

相关专题

更多
C++ 高性能计算与并行编程
C++ 高性能计算与并行编程

本专题专注于 C++ 在高性能计算(HPC)与并行编程中的应用,涵盖多线程、并发数据处理、OpenMP、MPI、GPU加速等技术。通过实际案例,帮助开发者掌握 如何利用 C++ 进行大规模数据计算和并行处理,提高程序的执行效率,适应高性能计算与数据密集型应用场景。

5

2026.01.08

C++ 高性能计算与并行编程
C++ 高性能计算与并行编程

本专题专注于 C++ 在高性能计算(HPC)与并行编程中的应用,涵盖多线程、并发数据处理、OpenMP、MPI、GPU加速等技术。通过实际案例,帮助开发者掌握 如何利用 C++ 进行大规模数据计算和并行处理,提高程序的执行效率,适应高性能计算与数据密集型应用场景。

0

2026.01.08

PPT动态图表制作教程大全
PPT动态图表制作教程大全

本专题整合了PPT动态图表制作相关教程,阅读专题下面的文章了解更多详细内容。

42

2026.01.07

c++ Libcurl用法详解
c++ Libcurl用法详解

本专题整合了c++ Libcurl用法详解,阅读专题下面的文章了解更多详细内容。

0

2026.01.07

c++ Libcurl用法大全
c++ Libcurl用法大全

本专题整合了c++ Libcurl用法详解,阅读专题下面的文章了解更多详细内容。

0

2026.01.07

C++ vector用法汇总
C++ vector用法汇总

本专题整合了C++中vector的用法大全,阅读专题下面的文章了解更多详细内容。

2

2026.01.07

C++ vector用法大全
C++ vector用法大全

本专题整合了C++中vector的用法大全,阅读专题下面的文章了解更多详细内容。

0

2026.01.07

2026年漫蛙最新官网地址
2026年漫蛙最新官网地址

漫蛙官网访问入口为https://manwa.me,另提供manwa.cc、manwa.vip、manwa.site等多节点备用链接,支持跨设备同步、个性化阅读及HTTPS安全加密。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

169

2026.01.07

php做exe需要在什么样的环境
php做exe需要在什么样的环境

PHP无法真正编译为EXE,所谓打包实为将解释器、脚本及依赖库封装成自解压容器;主流方案是ExeOutputforPHP(商业、Windows)和PHPDesktop(开源、跨平台),需手动处理扩展依赖、路径适配与运行时限制。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

5

2026.01.07

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号