jquery複数画像プレビューの作成方法

jqueryの1つの画像アップロードプレビュー機能です。以下のhtmlスクリプトで見ることができる写真をアップロードするために、各ボックスのように複数の機能を個別に変更したいと思います。jquery複数画像プレビューの作成方法

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<script> 

function imagepreview(input){ 
    if(input.files && input.files[0]){ 
     var filerd = new FileReader(); 
     filerd.onload=function(e){ 
      $('#imgpreview').attr('src', e.target.result); 
     }; 
     filerd.readAsDataURL(input.files[0]); 
    } 
    } 

</script> 
<style> 
body{ 
font-family:arial; 
} 
.wrap{ 
border:0px solid; 
width:40%; 
margin:10px auto; 
} 

table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
    text-align:center; 
    padding:10px; 
} 
#idupload{ 
    display:none; 
} 
.input-label{ 
    background-color:#009688; 
    color:#fff; 
    padding:5px 15px; 
} 
</style> 
</head> 
<body> 

<div class="wrap"> 
<table> 
    <tr> 
    <th><img id="imgpreview" src="" width="100" height="100"></th> 
    <th><img id="imgpreview" src="" width="100" height="100"></th> 
    <th><img id="imgpreview" src="" width="100" height="100"></th> 
    </tr> 
    <tr> 
    <td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td> 
    <td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td> 
    <td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td> 
    </tr> 
</table> 
</div> 

</body> 
</html>

出典

2017-01-06 Farooq

問題は、重複したIDを持っており、機能imagepreview()は常に画像のアップロードと同じIDを更新しています。これを修正するには、各画像プレビューに一意のIDを指定し、同じ対応する指定をファイルアップロードボックスに配置して、一意のファイルアップロードボックスが一意の画像プレビューを更新するようにします。

デモがあります。私はプレビューとアップロードの両方に一意のIDを与えてから、imagepreview()でアップロードボックスIDのIDを解析し、ページ上で更新される画像プレビューのIDに追加します。 http://codepen.io/anon/pen/apOyZB

出典

2017-01-07 00:11:05

@Farooq you bet！ –

fbにあなたを追加できますか？ – Farooq

同じ機能でイメージイベントを削除したいのですか？ – Farooq

jquery複数画像プレビューの作成方法

答えて

関連する問題