ajaxupload 上传文件

最新推荐文章于 2019-04-16 15:00:15 发布

原创最新推荐文章于 2019-04-16 15:00:15 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #Ajax #JavaScript #UI #CSS #ViewUI

jquery ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用AjaxUpload插件实现文件上传的方法。通过引入必要的jQuery库和AjaxUpload脚本，设置按钮触发文件选择，并监听文件上传过程，实现了文件上传的功能。文章还展示了如何在上传完成后更新页面显示。

使用的JS文件：

<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