如何将ajax的响应定位到单击的特定div

时间:2015-03-02 12:02:01

标签: javascript jquery html css ajax

我正在尝试将图像加载并显示在特定的图像中 插槽取决于我点击的位置,如 view1 view2 view3 ,如下所示。

我已经设置了一个包含div元素的表单,我想使用ajax 发布并处理我使用选择的浏览图像

如何将适当的目标: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>

1 个答案:

答案 0 :(得分:0)

jsfiddle

您可以使用jQuery的点击方法将事件附加到目标div,并从id获取event.target.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();
    });
});