位置: 编程技术 - 正文

jQuery AjaxUpload 上传图片代码

编辑:rootadmin

推荐整理分享jQuery AjaxUpload 上传图片代码,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

本次使用AJAXUPLOAD做为上传客户端无刷上传插件,其最新版本为3.9,官方地址: jquery.min.1.4.2.js 和 ajaxupload.js

HTML 代码:

js代 码:

服务器端 ajaxuploadhandler.ashx 代码

在PHP网站开发中,文件上传功能时常用到,之前我已介绍过如何利用PHP实现文件上传功能。随着WEB技术的发展,用户体验成为衡量网站成功与否的关键,今天和大家分享如何在PHP中利用Jquery实现Ajax方式文件上传功能的例子,其中使用到了Jquery插件Ajaxupload,其可以实现单个文件和多文件上传功能。

AjaxUpload

  Jquery插件AjaxUpload实现文件上传功能时无需创建form表单,即可实现Ajax方式的文件上传,当然根据需要也可以创建form表单。

准备工作

1、下载Jquery开发包和文件上传插件AjaxUpload。

2、创建uploadfile.html,并引入Jquery开发包和AjaxUpload插件

3、根据Jquery插件AjaxUpload的需要,创建一个触发Ajax文件上传功能的DIV

注释:由下面的代码我们可以看到Jquery插件AjaxUpload是根据upload_button这个DIV触发文件上传功能。

前台JS代码

  在代码中我设置了开关,根据需要可以匹配上传文件类型,同时也可以设置是以Ajax方式实现单个文件上传还是多个文件上传。

jQuery AjaxUpload 上传图片代码

注释:

第1行:$(document).ready()函数,Jquery中的函数,类似于window.load,使用这个函数可在DOM载入就绪能够读取并操纵时立即调用绑定的函数。

第3行:fileType和fileNum参数代表上传文件的类型和数量,默认值为可上传所有类型文件,同一时间只能上传一个文件,如想上传图片文件或同时上传多个文件,可将这两个变量值变为pic和more。

第6~8行:POST到服务器的数据,你可以设置静态值也可以通过Jquery的DOM操作函数获得一些动态值,比如form表单中INPUT的值等。

第9行:等同于前端

服务器端$_FILES['userfile']

第~行:文件上传前触发的功能。

第~行:图片文件类型的过滤功能,Jquery setData函数用来设置POST至服务器端的值。

第~行:设置同时只上传一个文件还是多个文件,如果只上传一个文件,则将触发按钮禁掉。如果要多传输几个文件,请在服务器端PHP文件上传程序中设置MAXSIZE的值,当然上传文件的大小限制同时和PHP.INI文件中的设置也有关。

第~行:在文件上传过程中每隔毫秒动态更新一次按钮的文字,已实现动态提示的效果。window.setInterval函数用来每隔指定的时间就执行一次内置的函数,交互时间单位为豪秒。

第~行:文件上传功能完成后触发的功能,根据返回值如果服务器端报错,则前端通过ALERT方式提示出错信息。

服务器端PHP文件上传代码

  大体上是根据之前介绍的PHP文件上传功能代码实例教程改编,涉及到的文件上传大小的设置,出错信息等说明都已在此文中详细说明。

总结

  基本上前端Ajax文件上传触发功能和服务器端PHP文件上传功能的原型就介绍完毕了,你可以根据自身需要对前后端代码进行补充,也可以将一些功能独立出来,比如文件类型、单个文件或者多文件上传功能。总的来说Jquery插件AjaxUpload实现文件上传功能的应用还是比较容易的。

基于jQuery实现select下拉选择可输入附源码下载 我们知道,一般select下拉框是只能选择的,不能用来输入内容的。而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时,我们可以让se

jquery操作select元素和option的实例代码 废话不多说了,直接给大家贴代码,具体代码如下所示:htmlheadtitle/title!--添加jquery--scriptsrc="../Script/jQuery/jquery-1.6.2.min.js"type="text/javascript"/scriptscripttype="

jquery实现的判断倒计时是否结束代码 本章节介绍一段代码实例,此代码能够判断当前日期是否已经倒计时结束,此代码中并没有倒计时效果,只是判断是否倒计时完成,比如购物网站优惠

标签: jQuery AjaxUpload 上传图片代码

本文链接地址:https://www.jiuchutong.com/biancheng/381957.html 转载请保留说明!

上一篇:基于JQuery实现图片轮播效果(焦点图)(jquery图片效果)

下一篇:基于jQuery实现select下拉选择可输入附源码下载(jquery的实现原理)

  • 应交增值税是什么意思
  • 增值税纳税申报时间
  • 印花税申报缴纳错误,怎么办
  • 厂家返点是什么意思
  • 用人单位延迟给员工交社保怎么办
  • 主管盾和制单盾的区别
  • 公帐的钱可以转给个人私帐可以吗
  • 库存商品和固定资产
  • 安装费人工费有什么不一样
  • 注册公司认缴出资方式怎么选
  • 发票税号不对还能报销吗
  • 商品进销差价属于流动资产吗
  • 存货损失
  • 小规模纳税人如何转一般纳税人
  • 资源税代扣代缴怎么操作
  • 员工福利费是不是加班费
  • 多开进来的发票怎么结算税点呢?
  • 保安公司怎样上保险
  • 事业单位只能开具0税率的普票
  • 税务小规模定律是什么意思
  • 企业所得税如何缴纳
  • 计算企业所得税的公式
  • 怎样处理教育费附加会计分录?
  • 什么是应付债券简单举例
  • 买入返售金融资产什么意思
  • 应发工资包含罚款吗
  • 羊毛衫变形了还能变回来吗
  • 股份支付的特征是什么
  • 劳务报酬个人所得税税率表2023
  • 律师费怎样入账
  • 收到银行本票的账务处理
  • 处置二手固定资产
  • 中科院怎么赚钱
  • 公允价值变动损益属于什么科目
  • 注册资本和投资总额的关系
  • yii2框架结构
  • vue中v-model
  • consul框架
  • php开发模板
  • 企业生产车间发生的直接材料费用属于生产费用
  • css选择器nth
  • 命令arp-a
  • string对象放在哪里
  • 二季度平均薪酬
  • 蔬菜免征增值税优惠
  • 受托加工的物资是存货吗
  • 预付款已经开了发票要怎么做账
  • 其他应收款和其他应付款可以通用吗
  • 初级会计实务中第二章第四节存货(5)费琪
  • 房地产项目完工清算报告
  • 销售预付卡的账务处理
  • 行政单位基建账地质灾害评估报告计哪个科目
  • 收到员工社保
  • 减免税款属于政府补助利得吗
  • 企业发生亏损时,下列各项,( )是弥补亏损的渠道
  • 工程施工和工程造价哪个好
  • 新开公司没有领失业金
  • 基本户注销了还能查询流水吗
  • 其他应收款收不回来了,如何核销
  • 优化sql语句10种方法
  • sql server执行语句
  • Win10预览版拆弹
  • 服务器迁移至新服务器方法
  • window7优盘不显示
  • macos10.8下载
  • guardhp.exe是什么意思
  • win10太麻烦了
  • 多文件操作
  • shell printf 变量
  • Bullet(Cocos2dx)之交叉编译Android,集成到cocos2dx3.x
  • 及将上市的手机
  • Unity3D游戏开发引擎
  • 批处理隐藏盘符
  • ActivityManager: Warning: Activity not started, its current task has been brought to the front 的的问题
  • 出口退税期限最长几个月以上
  • 河南省个人无犯罪证明书
  • 多计提的税金如何处理
  • 电子专用发票怎么申请领用
  • 可以去税务局交医社保吗
  • 部落冲突显示此不论描述无效
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设