3

画像のアップロードに関する問題を解決するのに少し苦労しています。選択されている画像のファイルタイプをチェックするjquery関数を備えたhtmlファイルアップロードフォームを使用しています。私がやりたいことは、Web サイトのページの現在の画像を、ユーザーがアップロードすることを決定したものに置き換えることです。しかし、アップロードから完全な画像ソース パスを取得する方法を見つけることができません。これを行うには、画像のデータベースを作成する必要がありますか、それとも他の方法がありますか? PHP/MySQL コードは使用できません。ASP.NET、C#、および SQL/SQL Express のみです。

アップローダーからフルパスを取得できないため、デフォルトの画像（名前とIDが「ロゴ」）をアップロードされた画像に正常に置き換えることができないことを除いて、これまでに私が持っているコードは次のとおりです。とても参考になります!よろしくお願いします!

<html>
    <head>
        <title>Image Swap Widget Testing</title>

    <style type="text/css">
        .myWebForm{
            border: 4px solid grey;
            width: 300px;
            height: 200px;
            padding: 10px;
            font-family: Arial;
            font-size: small;
        }
    </style>

        <script type="text/javascript" src="jquery-1.9.1.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                $('INPUT[type="file"]').change(function () {
                    var ext = this.value.match(/\.(.+)$/)[1];
                    switch (ext) {
                        case 'jpg':
                        case 'jpeg':
                        case 'png':
                        case 'gif':
                        case 'bmp':
                            $('#uploading').attr('disabled', false);
                            $('#logo').attr("src", $('#uploading').val());
                            alert('image approved!');
                            alert($('img').attr('src'));
                            alert($('img')[0].src);
                            alert($('#uploading').val(img.src));
                        break;
                    default:
                        alert('This is not an allowed file type.');
                        this.value = '';
                    }
                });

                $('#addButton').click(function (){
                    //alert('Add Image Button was clicked');

                    //var newImgSrc = getSrc($('#uploading').val());
                    //$('#logo').attr("src", newImgSrc);
                    //alert($('#logo').attr("src"));
                    //alert($('#uploading').val());

                });
            });

    </script>
    </head>

    <body>  

    <img src="Lighthouse.jpg" name="logo" alt="logo" id="logo" width="200" />

    <br/>

    <form name="myWebForm" class="myWebForm" action="#" method="post">
        <h3>Change Default Logo</h3>
            <input type="file" name="uploadField" id="uploading" />
        <p><b>Allow extensions:</b> .png, .bmp, .jpg, .jepg, .gif<p>
        <p><b>Dimensions:</b> 50px x 80px<p>
        <input type="button" name="addButton" id ="addButton" class="addButton" value="+ Add" />
        <input type="button" name="cancelButton" id ="cancelButton" class="cancelButton" value="X Cancel" />
    </body>
</html>
4

2 に答える 2

6

FileSystem API はいつでも使用できます。まず、私たちの入力:

<input type="file" id="MyImage" />

変更をリッスンしてファイルを取得します。

document.getElementById('MyImage').onchange = function(e) {
    // Get the first file in the FileList object
    var imageFile = this.files[0];
    // get a local URL representation of the image blob
    var url = window.URL.createObjectURL(imageFile);
    // Now use your newly created URL!
    someImageTag.src = url;
}

それが役立つことを願っています!

于 2013-03-14T19:45:10.550 に答える
1

iframe トランスポートを使用すると、ロード時に iframe からパスを取得できます。

<script>
$('#upload-frame').load(function(e) {
    $('img').attr('src', $(this).contents().find('body').html());
});
</script>
<form method="post" action="upload.php" enctype="multipart/form-data"
      id="upload-form" target="upload-frame">
  <input type="file" name="uploadField" id="uploading" />
  <input type="submit" value="upload"/>
</form>
<iframe id="upload-frame" name="upload-frame"></iframe>

サーバーでは、次のようなことができます：

$info = pathinfo(basename($_FILES['image']['name']));
$ext = strtolower($info['extension']);
if (in_array($ext, array('png', 'jpg', 'gif', 'bmp'))) {
    $path = 'SOME/PATH/filename.' . $ext;
    if (move_uploaded_file($_FILES['image']['tmp_name'], $path)) {
        echo $path;
    }
}
于 2013-03-14T15:38:31.377 に答える