3

次のコードを使用すると、サーバー上のディレクトリに (html フォームを使用して) 写真をアップロードできます。

<?php 

    $target = "http://www.mockcourt.org.uk/user/htdocs/pics/2012/";
    $target = $target . basename( $_FILES['uploaded']['name']); 
    $ok=1; 

    if (move_uploaded_file($_FILES['uploaded']['tmp_name'], $target)) 
    {
        echo "The file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded";
    } 
    else
    {
        echo "Sorry, there was a problem uploading your file.";
    }
?>

代わりに HTML ページに画像を追加するように変更する方法はありますか?

ありがとう

4

2 に答える 2

5

アップロードしたら、javascript を使用して HTML ページに配置できます。

ご質問の内容がよくわかりませんが、

編集：

したがって、ページ上の html フォーム:

<form action="imageUpload.php" method="post" enctype="multipart/form-data" target="upload_target"  onsubmit="jupload();"  id="form1" >
    <div style="visibility:'hidden';" class="imageholder"> <!-- a gif image to show that the process wasn't finished -->
    </div>
    <input type="file" name="imgfile" /> 
    <input type="submit" name="uploadButton" class="upbtn" value="Submit" />
</form>

アップロードおよび画像追加用の Javascript(JQUERY) コード:

function jupload()
{
    $(".imageholder").append('<img src="./images/loading.gif">');
}

function juploadstop(result)
{
    if(result==0)
    {
        $(".imageholder").html("");

    }
    // the result will be the path to the image
    else if(result!=0)
    {
        $(".imageholder").html("");
        // imageplace is the class of the div where you want to add the image  
        $(".imageplace").append("<img src='"+result+"'>");
    }   
}

phpコード:

<?php
    $target = "http://www.mockcourt.org.uk/user/htdocs/pics/2012/";
    $target = $target . basename( $_FILES['uploaded']['name']) ; 
    $ok=1; 

    if (move_uploaded_file($_FILES['uploaded']['tmp_name'], $target)) 
    {
        $result=$target;
    } 
    else
    {
        $result=0;
    }
?>

<script language="javascript" type="text/javascript">
    window.top.window.juploadstop(<?php echo $result; ?>);
</script>
于 2012-06-29T11:41:00.950 に答える
1

画像を送信するための HTML 形式のフォームがあるとします。送信ボタンではなく、単なるボタンを作成します。たとえば、

<input type='button' id='submit_form' value='upload' />

JavaScript では、Ajax を使用してフォームを送信し、Jquery を使用して Web ページに表示します。

$('#submit_form')click(function(){
  $.ajax({
    type: 'POST',
    url: path/phpfile.php,
    data: image_input_name
  });

//after submitting, get the url of the image form the server

  $('#div_to_display_image').html("<img src='path/image_file.jpg' alt='this' />");

});

お役に立てれば ：-）

于 2012-06-29T13:40:21.887 に答える