jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
本文实例讲述了jquery+ajax实现上传图片并显示上传进度功能。分享给大家供大家参考，具体如下：
jquery上传文件用的formdata，上传进度条需要添加xhr的onprogress
html代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Ding Jianlong Html</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/skin/layer.css" rel="external nofollow" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script>
</head>
<body>
<!-- 外层div 进度条的整体视觉和位置设置 -->
<div style="width:300px;height: 20px;border: 1px solid #CCC;">
<!-- 内层div 逐渐递增的进度条 -->
<div id="jdt" style="height: 20px;"></div>
</div>
<p>总大小<span id="total"></span>；已上传<span id="loaded"></span>；</p><br>
<form id="mainForm">
选择文件：<input type="file" name="file">
<input type="button" value="上传" onclick="upload()">
</form>
<script>
var uploading = false;
function upload(){
//首先封装一个方法 传入一个监听函数 返回一个绑定了监听函数的XMLHttpRequest对象
var xhrOnProgress=function(fun) {
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var data = new FormData($('#mainForm')[0]); //要加【0】
console.log(data);
if(uploading){
layer.alert("文件正在上传中，请稍候");
return false;
}
$.ajax({
type: 'POST',
url: 'upload_file.php', //当前路径
data: data,
dataType: 'json',
processData: false, //序列化，no
contentType: false, //不设置内容类型
beforeSend: function(){
uploading = true;
},
//进度条要调用原生xhr
xhr:xhrOnProgress(function(evt){
var percent = Math.floor(evt.loaded / evt.total*100);//计算百分比
console.log(percent);
// 设置进度条样式
$('#jdt').css('width',percent * 3 + 'px');
$('#jdt').css('background','skyblue');
//显示进度百分比
$('#jdt').text(percent+'%');
$('#loaded').text(evt.loaded/1024 + 'K');
$('#total').text(evt.total/1024 + 'K');
}),
success: function (data) {
if (data.code == 200) {
layer.msg(data.message, {icon: 1, time: 1000});
//成功后关闭修改页
setTimeout(function(){
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe的索引
parent.layer.close(index); //在执行关闭
} ,2000);
//还有刷新下iframe的界面
parent.location.reload();
} else {
layer.msg(data.message, {icon: 2, time: 3000});
}
uploading = false;
},
error: function (data) {
alert('服务异常，请稍后重试');
console.log(data);
}
});
}
</script>
</body>
</html>
php代码如下：
<?php
header('content-type:text/html;charset=utf-8');
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
}
else
{
// 文件中文转码
//iconv('utf-8', 'gbk', $_FILES["file"]["name"]);
//取出后缀名
$ext = strrchr($_FILES["file"]["name"],'.');
move_uploaded_file($_FILES["file"]["tmp_name"],
"upload/" . uniqid() . $ext);
$arr['code'] = 666;
$arr['message'] = "已经保存到: " . "upload/" . uniqid() . $ext;
echo json_encode($arr);die;
}
参考资料: https://www.jb51.net/article/94853.htm
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
(jsp需要引入 :jquery-1.9.0.js.jquery.form.js ) ,jsp页面使用的是bootstrap制作的,看不懂的标签不用管,form表单大同小异.代码比较简陋,只是为了演示使用ajaxSubmit异步上传图片及保存数据,请海含! (参考文献:http://www.jb51.net/shouce/jquery/jquery_api/Plugins/Form/ajaxSubmit.html) 一:web (add.jsp) 复制代码 代码如下: <%@page impor
-
PHP+jQuery+Ajax实现多图片上传效果
今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met
-
jquery插件ajaxupload实现文件上传操作
本文实例讲述了jquery插件ajaxupload实现文件上传操作代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></sp
-
jQuery Ajax文件上传(php)
如何实现jQuery的Ajax文件上传,PHP如实文件上传.AJAX上传文件,PHP上传文件. [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件.而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的.那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:test.html 复制代码 代
-
jQuery插件uploadify实现ajax效果的图片上传
昨天做了一天的ajax效果的图片上传,就是想让自己学的更加的精一些,所以看了很多第三方的控件,最后还是选择了uploadify这个控件,主要原因是比较容易上手. 首先我们先参考别人的资料(我自己整理了一下) 可选项 需要参数类型 参数名字 解释 (布尔型) auto 当文件被添加到队列时,自动上传. (字符串) buttonImg 浏览按钮的背景图片路径. (字符串) buttonText 默认在按钮上显示的文本. (字符串) cancelImg 取消按钮的背景图片路径. (字符串) check
-
基于HTML5 Ajax文件上传进度条如何实现（jquery版本）
在上篇文章给大家介绍了这篇文章里面的后台Servlet.所以这里只看前台的JS代码. 首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象:FormData FormData 对象可以使用append 方法进行 key - value的数据添加,与以前我们常用的json不同的就是可以异步上传二进制文件. 1.FormDate对象的创建 var formData = new FormData(); 2.向 FormDate 对象添加数据 formData.append("catnam
-
Jquery ajaxsubmit上传图片实现代码
而且未建立统一上传函数.于是将代码改造了.心想来个ajax异步上传图片吧,这技术应该很老套了.于是直接打开强大的cnblogs轻松的找到了 这篇文章 直接依葫芦画瓢,将该作者的劳动成果直接"拿来主义了".很快就把代码全改造了.可是当我把程序发布到服务器上的时问题来了.上传文件失效了!汗- 都是偷懒造成的恶果.继续打开先前参考的那篇文章.原来作者解释了只能在本地使用而不能发布到服务器上.心想我难道还得用 iframe + http post 这个 郁闷的方式么?? 于是不甘心的我打开了更
-
jQuery+ajax简单实现文件上传的方法
本文实例讲述了jQuery+ajax简单实现文件上传的方法.分享给大家供大家参考,具体如下: 可以通过ajax来提交表单,而不会刷新页面.主要使用的方法是 $("#formID").ajaxSubmit()方法. 1.要引入js插件 需要下载的附件:jquery.form.js 2.页面代码: <script src="project/js/jquery.form.js" type="text/javascript"></scr
-
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr
-
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件 完整实例代码点击此处本站下载. 效果图如下: 实现代码如下: JavaScript代码如下: 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $("#filelist").niceScroll({ cursor
-
jQuery插件ajaxFileUpload异步上传文件
ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://xiazai.jb51.net/201610/yuanma/ajaxfileupload(jb51.net).rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能
-
jquery之ajaxfileupload异步上传插件(附工程代码)
点我下载工程代码 由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/download_project_version.php?version_id=6 服务器端采用struts2来处理文件上传. 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1.jar 编写文