[英]How can I target the response from an ajax to a specific div that was clicked
我試圖在一個特定的插槽中加載和顯示圖像,具體取決於我點擊的位置,如下所示Say view1 , view2或view3 。
我已經設置了一個帶有div元素的表單,我想使用ajax來發布和處理我使用
如何將適當的target: id
名稱傳遞給JavaScript以在正確的位置顯示圖像? 我的腳本如下所示。
<form class = "ajaxform" method="post"
enctype = "multipart/form-data"
action = 'upload.php'>
<div id='view1' onclick="triggerFileUpload('photo')>view1</div>
<div id='view2' onclick="triggerFileUpload('photo')>view2</div>
<div id='view3' onclick="triggerFileUpload('photo')>view3</div>
<input type="file" name="imagefile" id="photo" />
</form>
<script type="text/javascript" >
$(document).ready(function() {
$('#photo').live('change', function() {
$(".ajaxform").ajaxForm({
target: '#view'
}).submit();
});
});
</script>
<script type="text/javascript">
function triggerFileUpload(f){
document.getElementById(f).click();
}
</script>
您可以使用jQuery的click方法將事件附加到目標div
並從event.target.id
獲取id
。 我不確定你要做什么的具體細節,但我希望下面的內容足以滿足要求。
HTML
<form class = "ajaxform" method="post"
enctype = "multipart/form-data"
action = 'upload.php'>
<div id='view1' class='photo-target'>view1</div>
<div id='view2' class='photo-target'>view2</div>
<div id='view3' class='photo-target'>view3</div>
<input type="file" name="imagefile" id="photo" />
</form>
JavaScript的
function createObjectURL(object) {
return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}
function revokeObjectURL(url) {
return (window.URL) ? window.URL.revokeObjectURL(url) : window.webkitURL.revokeObjectURL(url);
}
$(document).ready(function() {
var photoTarget = null;
$('#photo').on('change', function(event) {
var src = createObjectURL(this.files[0]);
var image = new Image();
image.src = src;
image.onload = function() {
revokeObjectURL(this.src);
};
$("#" + photoTarget).append(image);
$(".ajaxform").ajaxForm({
target: '#view'
}).submit();
});
$('.photo-target').click(function (event) {
photoTarget = event.target.id;
$("#photo").click();
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.