当前位置：硬件测评 > jQuery AjaxUpload上传图片代码【jquery】

jQuery AjaxUpload上传图片代码【jquery】

发布：2023-09-30 09:44

web前端|js教程

jquery_ajaxup加载，a jaxupload上传图片

web前端-js教程

这个这次我使用AJAXUPLOAD作为Upload客户端无刷上传插件，其最新版本是3.9，官方地址：http://www.sychzs.cn/ajax-upload/

横版游戏源码，是vscode兼容vs，ubuntu官方原版，如何导入到tomcat web，爬取软件爬虫，php点击加载更多，如何提高seo外推帖，手机页面网站源码分享，cms主题模板下载地址lzw

引入jquery.min.1.4。 2.js和ajax上传到页面.js

flash as3源码，vscode相关md，ubuntu中如何查看硬盘配置，tomcat配置日志，sqlite获取新数据，js翻书插件，前端-端框架报酬标准、爬虫制作程序图片、php简单源码、潇潇seo、诚信档案网站源码、flash个人网页模板下载、国外移动购物网站模板下载、帝国cms列表页面无权限访问、思考仓库管理系统开源，小程序商城后台数据库源码lzw

HTML代码：

问涛1.59登录源码，ubuntu检查内存状态，如何增加tomcat内存，爬虫+摩拜，个人记账网站源码PHP，seo是一份什么样的工作？ seo好做吗lzw

#txtFileName {width: 300px;}。 btnsubmit{边框底部：#cc4f00 1px 实心；左边框：#ff9000 1px 实心；顶部边框：#ff9000 1px 实心；右边框：#cc4f00 1px 实心；文本对齐：居中；内边距：2px 10px；行高：16px；背景：#e36b0f；高度：24px；颜色：#fff；字体大小：12px；光标：指针;}上传图片：浏览

js代码：

$(function () {var button = $('#btnUp'), Interval;new AjaxUpload(button, {/ /action: 'upload-test.php', 文件上传服务器端执行地址 action: '/handler/AjaxuploadHandler.ashx', name: 'myfile', onSubmit: function (file, ext) { if (!(ext && /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) {alert('图片格式不正确，请选择jpg格式文件！', '系统提示'); return false;}/ / 更改按钮文本，当用户选择 filebutton.text('Uploading');// 如果你想一次只允许上传 1 个文件，// 可以禁用上传按钮 this.disable();// 上传 -> 上传. -> 正在上传...interval = window.setInterval(function () {var text = button.text();if (text.length < 10) {button.text(text + '|');} else {button.text('上传中');}}, 200);},onComplete: function (file, response) {//file 本地文件名称，response 服务器端传回的信息button.text('上传图片(只允许上传JPG格式的图片,大小不得大于150K)');window.clearInterval(interval);// enable upload buttonthis.enable();var k = response.replace("", "").replace("", "" );if (k == '-1') {alert('您上传的文件太大！请不要超过150K');}else {alert("服务器返回的字符串：" +k); alert("本地文件名："+file);$("#txtFileName").val(k);$("
Jquery插件AjaxUpload在实现文件上传功能时不需要创建表单。可以实现Ajax方式的文件上传。当然，您也可以根据需要创建表单。 
准备
1。下载Jquery开发包和文件上传插件AjaxUpload。 
2。创建uploadfile.html并引入Jquery开发包和AjaxUpload插件

3。根据Jquery插件AjaxUpload的需求，创建一个触发Ajax文件上传功能的DIV

 文件上传

已上传文件列表：

注：从下面的代码中我们可以看到Jquery插件AjaxUpload根据upload_button DIV触发文件上传功能。

前端JS代码

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

$(document).ready(function(){var button = $('#upload_button'), Interval;var fileType = "all",fileNum = "one"; new AjaxUpload(button,{action: 'do /uploadfile.php',/*data:{'buttoninfo':button.text()},*/name: 'userfile',onSubmit : function(file, ext){if(fileType == "pic"){if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){this.setData({'info': '文件类型为图片'});} else {$('') .appendTo('#example .files').text('非图片类型文件，请重传');return false; }}button.text('文件上传中');if(fileNum == 'one')this .disable();interval = window.setInterval(function(){var text = button.text();if (text.length < 14){button.text(text + '.'); } else {button.text ('文件上传'); }}, 200);},onComplete: function(file, response){if(response != "success")alert(response);button.text('文件上传');window . clearInterval(interval);this.enable();if(response == "成功");$('').appendTo('#example .files').text(file); }});});

注：

第1行：$(document).ready()函数，Jquery中的函数，类似于window.load。使用此函数可以在 DOM 加载并准备好读取和操作时立即调用绑定函数。

第3行：fileType和fileNum参数代表上传文件的类型和数量。默认值是可以上传所有类型的文件。同一时间只能上传一个文件。如果要上传图片文件或者同时上传多个文件，可以将这两个变量的值变成pic等。

第 6~8 行：将数据 POST 到服务器。可以设置静态值，也可以通过Jquery的DOM操作功能获取一些动态值，比如表单中INPUT的值等

第 9 行：相当于前端

服务器端 $_FILES[‘用户文件’]

第10~36行：文件上传前触发的函数。

第11~21行：图像文件类型的过滤函数，Jquery setData函数用于设置POST到服务器的值。

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

第28~35行：文件上传过程中，按钮的文字每200毫秒动态更新一次，达到动态提示的效果。 window.setInterval 函数用于每隔指定时间执行内置函数。交互时间单位为毫秒。

第37~49行：文件上传函数完成后触发该函数。如果服务器根据返回值报错，前端通过ALERT提示错误信息。

服务器端PHP文件上传代码

总体是根据之前介绍的PHP文件上传功能代码示例教程改编的。文件上传大小的设置、错误信息等涉及到的说明在本文中都有详细解释。

$upload_dir = '../file/';$file_path = $upload_dir 。 $_FILES['userfile']['name'];$MAX_SIZE = 20000000;echo $_POST['buttoninfo'];if(!is_dir($upload_dir)){if(!mkdir($upload_dir))echo "该文件上传目录不存在，无法创建文件上传目录";if(!chmod($upload_dir,0755))echo "文件上传目录没有权限设置为可读可写";}if($_FILES[ 'userfile']['size']>$MAX_SIZE)echo "上传的文件大小超过指定大小";if($_FILES['userfile'][ 'size'] == 0)echo "请选择要上传的文件upload";if(!move_uploaded_file( $_FILES['userfile']['tmp_name'], $file_path))echo "复制文件失败，请重新上传"; switch($_FILES['userfile']['error']){case 0:echo "成功" ;break;case 1:echo "上传的文件超过php.ini中upload_max_filesize选项限制的值";break; case 2:echo "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值";break;case 3:echo "仅上传了部分文件";break;case 4:echo "没有文件已上传";break;}

总结

基本上前端Ajax文件上传触发功能和服务器端PHP文件上传功能的原型已经介绍完了。你可以根据自己的需要补充前后端代码，也可以分离一些功能，比如文件类型、单个文件或者多个文件上传功能。总的来说，应用Jquery插件AjaxUpload来实现文件上传功能是比较容易的。