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

Javascript 如何将ajax的响应定向到单击的特定div,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,我正在尝试以特定的方式加载和显示图像 插槽取决于我单击的位置,例如view1、view2或view3,如下所示 <form class = "ajaxform" method="post" enctype = "multipart/form-data" action = 'upload.php'> <div id='view1' onclick="triggerFileUpload('photo')>view1</div>

我正在尝试以特定的方式加载和显示图像 插槽取决于我单击的位置,例如view1、view2或view3,如下所示

<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>
我已经用div元素建立了一个表单,我想使用ajax来 发布并处理我使用 如何将适当的target:id名称传递给要 是否在正确的位置显示图像?我的脚本如下所示

<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


您已经在使用jQuery,因此请停止使用老式的onclick属性类型的事件处理,改为使用“正确”的jQuery方式绑定事件处理程序,然后您将在处理程序函数中自动访问触发事件的元素。或者在单击处理程序中使用$this.attr'id。不知道哪一个更好。非常感谢你,这已经非常完美了。我采用的准则如下:……$。ajaxform.ajaxform{target:+photoTarget}.submit;};$'。photo target'.clickfunction事件{photoTarget=event.target.id;//服务器端需要此函数来命名图像文档。getElementById'keyid'。value=photoTarget;$photo.click;};};我很高兴这对你有用:如果你能点击我帖子左边箭头下方的勾号,我将不胜感激。谢谢。这是我向Stackoverflow提出的第一个问题,所以我不知道该怎么办。非常感谢你。
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();
    });
});