Question

我想通过jQuery的AJAX函数上传个人资料图片。这意味着，当输入[type =“file”]发生变化时，我希望它实际发布表单并将数据发送到我的PHP脚本。我现在的代码是：

<script type="text/javascript">
$(document).ready(function(){
    $("#profileUpload").on('change', 'input[name="profilepic"]', function(){

    $("#profileUpload input[type='file']").attr('disabled','disabled');
    $("#picLoader").css('display','block');

    $.ajax({
        type: "POST",
        dataType: "json",
        url: "edit/uploadProfilePicture", // URL of the Perl script
        data: {profile_pic: $("input[name='profilepic']").val()},

        // script call was successful 
        // data contains the JSON values returned by the Perl script 
        success: function(data){
            if (data.error) { 

            } else { 

            } 
            $("#picLoader").css('display','none');
        } // success
    }); // ajax

    return false;
});
});
</script>
<form action="" method="post" class="form-horizontal" id="profileUpload" role="form" enctype="multipart/form-data"> 
    <div class="form-group profilepic">
        <label for="create_Profile" class="col-lg-3 control-label">Profilbillede</label>
        <div class="col-lg-9">
            <div style="position: relative; display: block; float: left;">
            <?php if(empty($profile_pic)): ?>
                <div style="z-index:10;">
                    <img src="<?= BASE_HTTP_PATH; ?>/public/img/default/no-profile-pic.png" id="profPic" style="width: 63px; float: left; margin: 0 10px 0 0;" />
                </div>
            <?php else: ?>
                <div style="z-index:10;">
                    <img src="<?= BASE_HTTP_PATH; ?>/public/img/default/nopic.png" id="profPic" style="width: 63px; float: left; margin: 0 10px 0 0;" />
                </div>
            <?php endif; ?>
                <div id="picLoader" style="position: relative; display: none; width: 63px; height: 68px; z-index: 100;">
                    <div style="position: absolute; top: 0; opacity: 0.3; background: #dfdfdf; width: 63px; height: 68px; z-index: 100;">&nbsp;</div>
                    <img src="<?= BASE_HTTP_PATH; ?>/public/img/default/ajax-loader.gif" style="position: absolute; top: 28px; left: 24px; z-index: 101;">
                </div>
            </div>
            <div style="position: relative; display: block; float: left;">
                <input type="file" id="create_Profile" name="profilepic" placeholder="Vælg profilbillede" style="float: left;" />
            </div>
            <br style="clear: both;">
        </div>
    </div>
</form>

问题是，我不知道如何使表单的子项发布到表单并正确地“激活”AJAX请求。有人可以帮忙吗？

提前致谢：）

Answer 1

只需将连接作为最后一个条目放在ajaxFileUpload函数的$ .ajaxFileUpload调用的成功和错误处理程序中，它将适用于后续点击。

所以看起来像这样

//uploader event
$('#uploadedfile').change(function(){
  ajaxFileUpload();
});

//upload file
function ajaxFileUpload(){
  $.ajaxFileUpload({
    url:'upload.php',
    secureuri:false,
    fileElementId:'uploadedfile',
    dataType: 'json',
    success: function(data,status){
        if(typeof(data.error) != 'undefined'){
            if(data.error){
                //print error
                alert(data.error);
            }else{
                //clear
                $('#img img').attr('src',url+'cache/'+data.msg);
            }
        }
        $('#uploadedfile').change(function(){
          ajaxFileUpload();
        });
    },
    error: function(data,status,e){
        //print error
        alert(e);
        $('#uploadedfile').change(function(){
          ajaxFileUpload();
        });
    }
  });

在更改时处理文件上载

1 个答案: