プレビュー画像をローカルにアップロード

2252 ワード

画像をローカルで選択してプレビュー機能を実現するには、全体的に2つの方法があります.
方法1、AJaxを使用してコンポーネントをアップロードし、ファイルを選択した後、自動的にAJaxを通じてファイルをサーバーにアップロードし、画像をサーバーのアドレスに戻す
メリット:この方法ではブラウザの互換性に問題はありません.
短所:サーバへの圧力が大きい
方法2:ローカルでJSを使用して異なるブラウザに対して操作する
メリット:高速
欠点:ブラウザ間での問題の処理
方法2を重点的に説明します.
要素:

<table style="border: 0px; width: 400px;">
			<tr>
				<td align="center">
					<img id="disImage"
						style="display: none; filter: progid : DXImageTransform . Microsoft . AlphaImageLoader(sizingMethod = scale);"
						width="106" height="106"
						src="${contextPath}/admin/commonlink/pic/blank.gif" />
				</td>
			</tr>
		</table>

要素:

<input type="file"  onchange="handler()"/>

handler()関数:

var picPath   = getPath(document.getElementById(picName)); 
			        if(this.getValue()==""){                            
			            document.getElementById("disImage").style.display="none";
			        }else{                   
			            document.getElementById('disImage').src = picPath; 
			            document.getElementById("disImage").style.display="block";
			        }

ファイルパスを取得する関数:異なるブラウザで処理

function getPath(obj){
           if(obj){
               //ie
               if (window.navigator.userAgent.indexOf("MSIE")>=1){
                   obj.select();
                   // IE          
                   return document.selection.createRange().text;
               }else if(window.navigator.userAgent.indexOf("Firefox")>=1){  
	                //firefox
	                if(obj.files){
	                   // Firefox          
	                   return obj.files.item(0).getAsDataURL();
	               	}
               		return obj.value;
               }
               return obj.value;
           }
        }

Laravel学習ノート

git commit コマンドを入力したあと git remote add でbitbucket.org にリポジトリを作成してみた。