`
zylucky
  • 浏览: 79754 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ajaxupload 上传文件

阅读更多

使用的JS文件:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
   
 <!-- Required for jQuery dialog demo-->
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" media="all" />

    <!-- AJAX Upload script itself doesn't have any dependencies-->
    <script type="text/javascript" src="../ajaxupload.js"></script>

 

 

<li id="example1"><div id="upload_button"><!--<input type="submit" class="btnUpload" value=""/>-->上传文件</div>
<li id="example2"><div id="upload_text"></div>
		
        <p>已上传的文件列表:</p> 
            <ol class="files">
            	<div id="del" style="display:none;">
            		
                   <li style="float:left; width:50px;"></li>
                    <li style="float:left;"><a href="#;" onClick="deleteFile('1')">删除</a></li>
            	</div>
            </ol>
</li>

 

  $(document).ready(function(){

		var button = $('#upload_button'), interval;
		var button_text = $('#upload_text'), interval;
		var fileNum = "one";
		new AjaxUpload(button, {
			action: '../proposalannex/annex_save.html', 
			name: 'annex',                   //后台取此名来进行文传上传
			onSubmit : function(file, ext){	
				button_text.text('文件上传中');
				this.disable();
				interval = window.setInterval(function(){
					var text = button_text.text();
					if (text.length < 13){
						button_text.text(text + '.');					
					} else {
						button_text.text('Uploading');				
					}
				}, 200);
			},
			onComplete: function(file, response){
				button_text.text('文件上传中');							
				window.clearInterval(interval);							
				this.enable();				
			    if(response != "");{
					//button_text.text('文件上传成功!');
					button_text.text('');
					alert('文件上传成功');
					$("#annexId").val(response);
					this.enable();	
			    }
				$('<li></li>').appendTo('#example2 .files').text(file);
				document.getElementById('del').style.display='block';							
			}
		});
  });

 

 

其它上传文件方式:http://lisanlai.iteye.com/blog/680785

分享到:
评论

相关推荐

    Base64和AjaxUpload上传文件代码实例

    Base64和AjaxUpload上传文件代码实例 Base64和AjaxUpload上传文件代码实例是两种常用的文件上传方式,它们都可以实现文件上传到服务器端,但它们之间有着明显的区别。 Base64上传文件是一种基于文本编码的上传方式...

    AjaxUpload.rar 文件上传

    AjaxUpload是一种基于JavaScript和Ajax技术实现的异步文件上传方式,它允许用户在不刷新整个网页的情况下上传文件,显著提升了用户体验。AjaxUpload的核心是利用XMLHttpRequest对象与服务器进行交互,通过创建隐藏的...

    ajaxupload无刷新文件上传,支持多文件上传,使用很方便哦

    ajaxupload.js 是一款使用jquery上传文件的js插件,对于简单的文件上传,足够可以应付, 你可以根据自身需要对前后端代码进行补充,也可以将一些功能独立出来,比如文件类型、单个文件或者多文件上传功能。总的来说...

    Jquery AjaxUpload实现文件上传实例 PHP版

    AjaxUpload是jQuery的一个插件,它提供了一种方便的异步文件上传方式,无需刷新页面即可完成文件上传,提高了用户体验。在这个“Jquery AjaxUpload实现文件上传实例 PHP版”中,我们将探讨如何使用jQuery的Ajax...

    Ajax Upload多文件上传插件

    Ajax Upload文件上传插件允许你上传多个插件而无需刷新页面,可以使用任何的元素来显示文件选择窗口。它可以在所有主流的浏览器下工作,从2.0版本开始,不需要任何库运行。Ajax Upload文件上传插件不会污染任何命名...

    Jquery AjaxUpload实现文件上传功能代码

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

    ssm整合+ajaxUpload文件上传

    AjaxUpload则是实现异步文件上传的一种JavaScript库,它允许用户在不刷新整个页面的情况下进行文件上传,提高了用户体验。接下来,我们将详细讨论这两个知识点。 首先,**Spring** 是一个全面的后端应用框架,它...

    ajaxupload.js上传图片

    3. **安全考虑**:在服务器端,务必验证上传文件的类型和大小,防止恶意文件上传。 4. **用户体验**:提供明确的上传进度指示,以增强用户体验。如果可能,支持断点续传和多文件上传功能。 AjaxUpload.js 图片上传...

    ajaxupload.js

    AjaxUpload是一种在Web应用中实现异步文件上传的技术,它基于JavaScript的Ajax(Asynchronous JavaScript and XML)技术,允许用户在不刷新整个页面的情况下上传文件,提高了用户体验。`ajaxupload.js`是实现这一...

    AjaxUpLoad.js实现文件上传功能

    AjaxUpLoad.js是一个使用JavaScript实现的上传控件库,它可以很方便地帮助开发者在网页上实现无刷新上传文件的功能。无刷新上传文件是指在不重新加载整个页面的情况下将文件数据上传到服务器的过程。AjaxUpLoad.js的...

    ajaxupload华丽的图片上传

    利用ajaxupload组件实现的图片上传 1、在部署该工程时,要在tomcat/webapps/对应的工程下建upload/good目录; 2、在该工程中,点击一次上传图片按钮,就执行一次后台操作,然后将图片的路径保存在一个input的隐藏域...

    上传文件AJAX

    在现代Web开发中,"上传文件AJAX"是一项至关重要的技术,它允许用户在不刷新整个页面的情况下,通过异步方式上传文件。这种方式极大地提升了用户体验,因为它使得网页交互更加流畅和快速。AJAX(Asynchronous ...

    ajaxupload在spring mvc4.2中实现简单文件上传

    AjaxUpload是一种利用JavaScript和Ajax技术实现在后台服务器上异步上传文件的方法。它通过创建隐藏的IFrame和表单来模拟文件提交,避免了浏览器对跨域限制的问题,同时利用Ajax进行数据传输,实现无刷新的交互。 2...

    jquery Ajaxupload应用

    AjaxUpload是一款非常实用的JavaScript插件,它允许用户在无需刷新页面的情况下上传文件,极大地提升了用户体验。在这个详细的知识点解析中,我们将深入理解AjaxUpload的工作原理,了解如何集成到项目中,并掌握其...

    使用ajaxupload.js/ajaxfileupload.js实现文件上传

    首先,`ajaxupload.js` 是一个轻量级的插件,它扩展了传统的Ajax功能,允许通过Ajax方式上传文件。该库的核心原理是利用HTML5的FormData对象,将文件数据封装起来,然后通过XMLHttpRequest对象发送到服务器。这种...

    Python - Flask 使用Ajax 实现多文件上传

    以下将详细介绍如何在Flask中利用Ajax实现多文件上传。 **一、Flask基础知识** Flask是一个轻量级的Web服务程序,它使用Python编写,基于Werkzeug WSGI工具箱和Jinja2模板引擎。Flask提供了一个简单易用的接口,...

    异步上传文件图片js ajaxupload

    异步上传文件图片js http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html

    ajaxUpload.

    标题"ajaxUpload."和描述"ajaxUpload.ajaxUpload.ajaxUpload."暗示我们将深入探讨这个话题。 ### 一、Ajax Upload原理 Ajax Upload的核心是利用JavaScript的异步特性,通过XMLHttpRequest对象与服务器进行通信。它...

    Ajaxupload

    AjaxUpload广泛应用于各种需要用户上传文件的场景,例如: 1. **在线编辑器**:用户可以上传图片或其他媒体文件到服务器,然后在编辑器中直接使用。 2. **社交媒体**:用户可以分享照片、视频到平台,而无需离开...

    jquery 插件ajaxupload 的简单应用

    AjaxUpload是一款基于jQuery的插件,它允许用户在无需刷新页面的情况下上传文件。这个插件极大地提升了用户体验,因为它能够实现在后台处理文件上传,同时还可以自定义各种反馈机制,如进度条、消息提示等。在网页...

Global site tag (gtag.js) - Google Analytics