recherche

Maison  >  Article  >  développement back-end  >  关于ajaxupload上传插件的有关问题

关于ajaxupload上传插件的有关问题

WBOY
WBOYoriginal
2016-06-13 12:09:191005parcourir

关于ajaxupload上传插件的问题
http://www.zhangxinxu.com/php/200911/ajax-file-upload-get-file-path2.php

一个页面中间需要8个地方用到这个插件，我的解决思路如下：首先我给每个input加了一个click事件，来获取id值，同时把window.onload写成了一个方法，结果是每次要点击两次input才会弹出图片选择框，主要原因是除了自己加的click事件外，插件本身也加了一个click事件，由于自己水平有限没有办法修改ajaxupload.js中代码。
直接试了第二种方法，就是把现在window.onload中的内容根据每个id的不同写了8个，这时可以上传了，但是每次显示的时候都在最后一个input下面。
请问有什么办法可以解决这个问题吗？谢谢！
------解决思路----------------------
多个ajaxUpload同时用，
我试了试，我这能响应两个不同的按钮向不同的php文件发送文件，不知道能满足你的要求。

<html><br />	<head><br />		<title>ajaxupload上传</title><br />		<meta charset="utf-8"/><br />		<style type="text/css"><br />			.divMain{<br />				position:absolute;<br />				width:140px;<br />				height:100px;<br />				padding-left:60px;<br />				padding-top:40px;<br />				background-color:#ccddee;<br />			}<br />			#upload{<br />				width:150px;<br />				height:30px;<br />			}<br />			.content{<br />				width:300px;<br />				height:200px;<br />			}<br />			.divMainNo2<br />			{<br />				position:absolute;<br />				left:300px;<br />				width:140px;<br />				height:100px;<br />				padding-left:60px;<br />				padding-top:40px;<br />				background-color:#ccddee;<br />			}<br />			<br /><br />		</style><br />		<script type="text/javascript" src="./jquery-1.8.2.min.js"></script><br />		<script type="text/javascript" src="./ajaxupload.js"></script><br />	</head><br />	<body><br />		<div class="divMain"><br />			<button id="upload">文件上传</button><br />			<div class="content"></div><br />		</div><br />		<div class="divMainNo2"><br />			<button id="uploadNo2">文件上传</button><br />			<div class="contentNo2"></div><br />		</div><br />	</body><br />	<script type="text/javascript"><br />		/*<br />				ajaxupload上传<br />			*/<br />		   $(document).ready(function(){<br />			    var button = $('#upload'), interval;<br />			    var fileType = "all",fileNum = "one"; <br />			    new AjaxUpload(button,{<br />			        action: './upload.php',<br />			        name: 'userfile',<br />			        onSubmit : function(file, ext){<br />			            if(fileType == "pic")<br />			            {<br />			                if (ext && /^(jpg<br><font color='#FF8000'>------解决思路----------------------</font><br>png<br><font color='#FF8000'>------解决思路----------------------</font><br>jpeg<br><font color='#FF8000'>------解决思路----------------------</font><br>gif)$/.test(ext)){<br />			                    this.setData({<br />			                        'info': '文件类型为图片'<br />			                    });<br />			                } else {<br />			                    $('<li></li>').appendTo('.files').text('非图片类型文件，请重传');<br />			                    return false;               <br />			                }<br />			            }<br />			            button.text('文件上传中');<br />			            if(fileNum == 'one')<br />			                this.disable();<br />			            interval = window.setInterval(function(){<br />			                var text = button.text();<br />			                if (text.length < 14){<br />			                    button.text(text + '.');                    <br />			                } else {<br />			                    button.text('文件上传中');             <br />			                }<br />			            }, 200);<br />			        },<br />			        onComplete: function(file, response){//上传成功的函数；response代表服务器返回的数据<br />							//清楚按钮的状态<br />							button.text('文件上传');<br />				            window.clearInterval(interval);<br />				            this.enable();<br />							//修改下方div的显示文字<br />						if('success'==response){<br />							$(".content").text("上传成功");<br />						}else{<br />							$(".content").text("上传失败");<br />						}<br />			        }<br />					});<br />					<br />				var buttonNo2 = $('#uploadNo2'), interval;<br />			    var fileType = "all",fileNum = "one"; <br />			    new AjaxUpload(buttonNo2,{<br />			        action: './upload1.php',<br />			        name: 'userfile',<br />			        onSubmit : function(file, ext){<br />			            if(fileType == "pic")<br />			            {<br />			                if (ext && /^(jpg<br><font color='#FF8000'>------解决思路----------------------</font><br>png<br><font color='#FF8000'>------解决思路----------------------</font><br>jpeg<br><font color='#FF8000'>------解决思路----------------------</font><br>gif)$/.test(ext)){<br />			                    this.setData({<br />			                        'info': '文件类型为图片'<br />			                    });<br />			                } else {<br />			                    $('<li></li>').appendTo('.files').text('非图片类型文件，请重传');<br />			                    return false;               <br />			                }<br />			            }<br />			            button.text('文件上传中');<br />			            if(fileNum == 'one')<br />			                this.disable();<br />			            interval = window.setInterval(function(){<br />			                var text = button.text();<br />			                if (text.length < 14){<br />			                    button.text(text + '.');                    <br />			                } else {<br />			                    button.text('文件上传中');             <br />			                }<br />			            }, 200);<br />			        },<br />			        onComplete: function(file, response){//上传成功的函数；response代表服务器返回的数据<br />							//清楚按钮的状态<br />							button.text('文件上传');<br />				            window.clearInterval(interval);<br />				            this.enable();<br />							//修改下方div的显示文字<br />						if('haha'==response){<br />							$(".contentNo2").text("上传成功");<br />						}else{<br />							$(".contentNo2").text("上传失败");<br />						}<br />			        }<br />					});<br />			});<br />	</script><br /></html>

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：学习使用Yii Srbac遇到的有关问题Article suivant：正则验证有关问题，6-16位字母或数字

Articles Liés

Voir plus