一个简单的ajax上传进度显示示例

本例用了jquery.form.js请到演示页面查看
 
CSS Code


代码如下:

<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>

XML/HTML Code


代码如下:

<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" size="60" name="myfile">
<input type="submit" value="Ajax File Upload">
</form>
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
<div id="message"></div>

JavaScript Code


代码如下:

<script>
$(document).ready(function()
{
var options = {
beforeSend: function()
{
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+'%');
$("#percent").html(percentComplete+'%');
},
success: function()
{
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response)
{
$("#message").html("<font color='green'>"+response.responseText+"</font>");
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#myForm").ajaxForm(options);
});
</script>

upload.php


代码如下:

<?php
$output_dir = "../upload/";
if(isset($_FILES["myfile"]))
{
//Filter the file types , if you want.
if ($_FILES["myfile"]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br>";
}
else
{
//move the uploaded file to uploads folder;
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
echo "Uploaded File :".$_FILES["myfile"]["name"];
}
}
?>

赞 (0)

相关推荐

  • AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页

    AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页

    1.引言 2.实现代码 2.1.服务器端代码 2.1.1. 文件上传状态类(FileUploadStatus) 2.1.2. 文件上传状态侦听类(FileUploadListener) 2.1.3. 后台服务类(BackGroundService) 2.1.4. 文件上传状态控制类(BeanControler) 2.2. 客户端代码 2.2.1. AjaxWrapper.js 2.2.2. fileUpload.html 2.2.3. result.jsp 2.2.4. fileUpload.c

  • ajax+php打造进度条 readyState各状态

    用Ajax+php打造进度条,其实很简单. readyState == 状态(0,1,2,3,4) 0:请求未初始化,还没调用open 1:请求已经建立,但还没有发送,还没调用send 2:请求已发送,并且正在处理 3:请求正在处理,通常响应中已有部分数据可调用 4:完毕 复制代码 代码如下: var xmlHttp; function create() if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHT

  • 服务端配置实现AJAX跨域请求

    一直以为AJAX跨域是无法逾越的鸿沟,最近发现原来在服务端可以通过发送header信息来允许AJAX跨域请求. PHP代码示例: 复制代码 代码如下: header('Access-Control-Allow-Origin:*'); header('Access-Control-Allow-Headers:X-Requested-With'); 经过测试,webkit内核的浏览器成功实现跨域请求. IE一如既往的不支持~看来只能在移动端享用这一强大功能了 另外,需要注意的是,第一行配置中的*表示

  • asp.net+ajax的Post请求实例

    本文实例讲述了asp.net+ajax的Post请求的实现方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: //一个ajax的Post请求       function submitInfo() {          $(".warn").hide(); //刚提交的时候隐藏错误的信息          var data = $("#formData").serialize(); //将表单的数据通过序列化表单值,创建 URL 编码文本字符串.形成一个表

  • ajax提交加载进度条示例代码

    ajax提交加载进度条示例代码

    实现效果图  加载图片  实现方式: 在jsp页面中加入 样式 复制代码 代码如下: .progress{z-index: 2000} .mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #2F2F2F} 节点 复制代码 代码如下: <img id="progressImgage" class="progress" style=&qu

  • Ajax在请求过程中显示进度的简单实现

    Ajax在请求过程中显示进度的简单实现

    Ajax在Web应用中使用得越来越频繁.在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击该按钮产生多个并发Ajax请求):调用完成后,图片消失,当前页面运行重新编辑.以下图为例,页面中通过一个Load链接以Ajax请求的方式加载数据(左).当用户点击该链接之后,Ajax请求开始,GIF图片显示"Loading"状态,同时当前页面被"罩住"防止用户继续点击L

  • 解决ajax跨域请求数据cookie丢失问题

    前端: 以jquery为例: 需要加入 复制代码 代码如下: xhrFields: {             withCredentials: true         },         crossDomain: true, $.ajax({         type: postType,         url: url,         data: postData || '',         xhrFields: {             withCredentials: tru

  • django通过ajax发起请求返回JSON格式数据的方法

    本文实例讲述了django通过ajax发起请求返回JSON格式数据的方法.分享给大家供大家参考.具体实现方法如下: 这是后台处理的: def checkemail(request): user = None if request.POST.has_key('email'): useremail = request.POST['email'] result = {} user = User.objects.filter(useremail__iexact = useremail) if user:

  • jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码

    jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码

    本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件 完整实例代码点击此处本站下载. 效果图如下: 实现代码如下: JavaScript代码如下: 复制代码 代码如下: <script type="text/javascript">  $(document).ready(function() {      $("#filelist").niceScroll({          cursor

  • ajax+php打造进度条代码[readyState各状态说明]

    readyState == 状态(0,1,2,3,4) 0:请求未初始化,还没调用open 1:请求已经建立,但还没有发送,还没调用send 2:请求已发送,并且正在处理 3:请求正在处理,通常响应中已有部分数据可调用 4:完毕 复制代码 代码如下: var xmlHttp; function create() if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器 } el

  • jsp+ajax发送GET请求的方法

    本文实例讲述了ajax发送GET请求,然后通过jsp页面来接收处理的实现方法.分享给大家供大家参考.具体实现方法如下: Ajax发送GET请求 这里用一个实例演示Ajax发送get请求,实例具体要求为一个注册页面,当用户填写完用户名称时,该输入框失去焦点后会通过Ajax向后台发送验证信息,如果用户名不是admin则通过验证,否则不通过验证. 下面先看JSP页面具体信息: 复制代码 代码如下: <form action="servlet/LoginServlet" method=&

  • jquery+ajax实现跨域请求的方法

    本文实例讲述了jquery+ajax实现跨域请求的方法.分享给大家供大家参考.具体实现方法如下: 说明:这里的dataType 为  "jsonp"  :type 只能为 GET 前台请求代码如下: 复制代码 代码如下: $.ajax({  type: "GET",  url: "http://www.xxx.com/Rest/ValidAccountsExists.aspx?accounts=admin",  dataType: "j

  • 让ajax更加友好的实现方法(实时显示后台处理进度。)

    让ajax更加友好的实现方法(实时显示后台处理进度。)

    ajax应用越来越多,大部分ajax处理都是在前台显示1个"loading...",然后把数据提交给服务器进行处理,处理完毕后显示"处理完毕".我们能否让ajax更加友好点,实时显示服务器处理的进度了?这在一些长时间的请求中尤其重要,比如上传文件.发送邮件.批量处理数据.答案当然是可以的,不然就不会写这个了,对吧,^_^. 存在的问题: 要解决实现上面的功能,需要解决下面几个问题: 1. 服务器如何在处理一部分数据后传递部分response到浏览器. 2.浏览器如何

  • AJAX 进度条实现代码

    AJAX 进度条实现代码

    效果如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ajax Progress Bar</title> <script type="text/javascript"> var xmlHttp; var key; var bar_color = '

  • php+ajax实现带进度条的大数据排队导出思路以及源码

    php+ajax实现带进度条的大数据排队导出思路以及源码

    废话不多说,先上效果图: 点击导出,实现 点击导出 统计完成之后 点击确定 下面来谈谈实现的思路: 前面导出操作简单,从第二个导出操作开始: 点击"确定"调用exportCsv函数 复制代码 代码如下: <a class="on" href="javascript:exportCsv();"><em>导出</em></a> exportCvs函数如下function exportCsv(){ //清

随机推荐