0

シングルクリックのアバターアップロードフォームを作成しようとしています。これはJavascript/php混合コードです：

<script type="text/javascript">
function uploadavatar(){
    $('#frmuploadavatar').submit(); 
}
    <?php 
    if(isset($_POST["btnuploadavatar"])){
    $extension = pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION);
    $filename = pathinfo($_FILES["file"]["name"], PATHINFO_FILENAME);
    $allowedExts = array('jpg','png');
    if(!in_array($extension, $allowedExts)){
        ?>
        $('#smlavatar').html("The uploaded file is not a jpg / png image!");
        $('#smlavatar').attr("class","warning");
        <?php
    }else if($_FILES["file"]["size"]>2097152){
        ?>
        $('#smlavatar').html("The uploaded file shouldn't exceed 2 megabytes!");
        $('#smlavatar').attr("class","warning");
        <?php
    }else{
        $uploadpath = "avatars/" . $filename . rand(1,1000000) . "." . $extension;
        move_uploaded_file($_FILES["file"]["tmp_name"], $uploadpath);
        ?>
        $('#imgavatar').attr("src","<?php echo $uploadpath; ?>");
        $('#smlavatar').html("New avatar upload successfully!");
        <?php
    }
}
?>
</script>

そして、これがフォームのhtmlコードです。

<form action="register.php" method="POST" id="frmuploadavatar">
<input type="file" class="avatarupload" id="inpuploadavatar" name="avatar" onchange="uploadavatar()" />
<input type="button" id="btnuploadavatar" value="Upload New Avatar" style="width: 150px;" />
</form>

cssコードは含めませんでしたが、ファイルアップロードコントロールが非表示になり、ボタンが表示されるようにコード化されていますが、ユーザーは実際にはボタンではなくファイルアップロードコントロールをクリックしています（ファイルアップロードはz-indexで前面に表示されます） ）。
関数uploadavatar（）がアラートでテストすることにより、呼び出されていることを知っています。ただし、フォーム「frmuploadavatar」は、JQueryコードで指示されているように送信されません。ヘルプ？

4

1 に答える 1

1

シングルクリックの画像アップロードの場合、隠しファイルのアップロードとフォームのボタンが必要です。フォームが別のフォームにネストされていないことを確認してください。

<form action="do_upload.php" id="frmupload">
<input type="file" id="inpupload" style="display:none" />
<input type="button" id="btnupload" value="Upload Avatar" />
</form>

次に、JQueryを使用してファイルのアップロードをトリガーし、ボタンをクリックしてクリックします。

$(document.body).ready(function(){
    $("#btnupload").click(function(){ $("#inpupload").trigger("click"); });
    $("#inpupload").change(function(){ $("#frmupload").submit(); });
});

終わり！必要に応じて、inpuploadの変更関数をajaxアップロードコードに置き換えることもできます。

于 2013-03-24T07:13:41.227 に答える