ajaxupload アップロード プラグインに関する質問

WBOY
リリース: 2016-06-13 12:09:19
オリジナル
1003 人が閲覧しました

ajaxupload アップロード プラグインに関する質問
http://www.zhangxinxu.com/php/200911/ajax-file-upload-get-file-path2.php

ページには 8 つの場所が必要ですこのプラグインに関する私の解決策は次のとおりです。まず、各入力にクリック イベントを追加して ID 値を取得し、同時に window.onload をメソッドとして記述します。入力を 2 回クリックするたびに、選択ボックスの画像がポップアップします。主な理由は、自分で追加したクリック イベントに加えて、プラグイン自体もクリック イベントを追加するためです。レベルでは、ajaxupload.js のコードを変更できません。
2番目の方法を直接試してみました。これは、window.onloadに各IDに応じて8つの異なる内容を書き込むことです。この時点ではアップロードはできますが、表示されるたびに最後の入力の下にあります。
この問題を解決する方法はありますか?ありがとう!
------ソリューションのアイデア----------------------
複数の ajaxUpload を同時に使用する、
試してみましたが、2 つの異なるボタンに応答してファイルを送信できます。要件を満たすかどうかはわかりません。

<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>
ログイン後にコピー

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート