0

我想让通过 jQuery 的 AJAX 功能上传个人资料图片成为可能。这意味着，当 input[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 请求。任何人都可以帮忙吗？

提前致谢 ：）

4

1 回答 1

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();
        });
    }
  });
于 2013-10-17T04:34:38.067 回答