0

ファイルアップロードボタンのスタイルを設定し、アップロード前にプレビュー画像を追加しました...基本的に、IEを除くすべてのブラウザーですべてがチャームとして機能します...

私のアイデアをもっと身近なものにするために、次のようにします: http://postimage.org/gallery/22cvzh2g/bcd61d61/

IE で画像が表示されない理由はありますか? IE9で試しましたが、パスを取得しただけですが、$('#background-preview').removeClass('hidden'); 非表示のクラスが削除されていないため、機能していないようです...

...また、IE と Opera では、ファイル パスとして注意してください C:/fakepath/etc...一方、FireFox、Chrome、および通常のブラウザでは、ファイル名だけが表示されます。どんな助けでも大歓迎です！

ヘッダーに次のものがあります。

<script>
function clearFileInput() {
    var oldInput = document.getElementById("upload-bg");
    var newInput = document.createElement("input");
    newInput.type = "file";
    newInput.id = oldInput.id;
    newInput.name = oldInput.name;
    newInput.onchange = oldInput.onchange;
    newInput.className = oldInput.className;
    newInput.style.cssText = oldInput.style.cssText;
    // copy any other relevant attributes

    oldInput.parentNode.replaceChild(newInput, oldInput);
    $('#background-preview').addClass('hidden');

    var oldInput1 = document.getElementById("FileField");
    var newInput2 = document.createElement("input");
    newInput2.type = "text";
    newInput2.id = oldInput1.id;
    newInput2.className = oldInput1.className;
    newInput2.style.cssText = oldInput1.style.cssText;
    oldInput1.parentNode.replaceChild(newInput2, oldInput1);

}




function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#background-image')
                .attr('src', e.target.result)
                .width(250)
                .height(170);
            $('#background-preview').removeClass('hidden');
        };

        reader.readAsDataURL(input.files[0]);
    }
}

実際のボタンがある本体セクション:

<div id="FileUpload">
 <input id="upload-bg" type='file' onchange="readURL(this);getElementById('FileField').value = getElementById('upload-bg').value;" />
 <div id="BrowserVisible"><input type="text" id="FileField" /></div>
</div>
<div id="background-preview" class="hidden"><img id="background-image" src="#" alt="Bad Image File !" /><a href="#" id="clear-bg-upload" onclick="clearFileInput();"> </a></div>

また、カスタマイズ ファイルの入力を処理する CSS は次のとおりです。

#FileUpload {
position:relative;
height: 50px;
}
#BrowserVisible {
margin: 5px 0px 5px 0px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background:url(images/button-browse.png) 100% 0px no-repeat;
height:42px;
width:290px;
}
#FileField {
border: 1px solid #BDBDBD;
font-size: 13px;
height: 40px;
margin: 0;
padding: 0;
width: 215px;
}
#upload-bg {
position:relative;
width:290px;
height:43px;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
#clear-bg-upload {
position: absolute;
top: 0px;
right: 0px;
width: 16px;
height: 16px;
background: url(images/icon-delete-input.png) top center no-repeat;
}
#background-preview {
border: solid 1px #ccc;
padding: 5px;
position: relative;
display: inline-block;
border-radius: 5px;
-o-border-radius: 5px;
-icab-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#background-preview.hidden {
display: none;
}
#background-preview img {
margin: 0px auto;
display: block;
max-height: 140px;
max-width: 180px;
width: auto;
}

----------------------------- 編集済み -------------------- -----------

わかりました、Ajax (使用) アップロードを介して別のアプローチに行きましたが、すべてが素晴らしいです... フィールド値のみを送信する方法がわかりません。現在はフォームのように送信されていますが、フィールドのみの送信をトリガーする方法はありますか。現在は に歪んで#FileUploadFormいますが、これをフォーム内で使用したいのですが、フォームをネストできないため...ちょっと行き詰まっています...現在のように2つのフォームがあることを除けば、ファイルのアップロードをお願いします独自の形式でラップする必要がないだけで、現在のように送信されるようにファイルされています。

これは私が使用しているスクリプトです:

    function showRequest(formData, jqForm, options) {
    var fileToUploadValue = $('#fileToUpload').fieldValue();
    if (!fileToUploadValue[0]) {
        $('#result').html('Please select a file.');
        return false;
    }
    $("#loading").show();
    return true;
}

function showResponse(data, statusText) {
    $("#loading").hide();
    if (statusText == 'success') {
        var msg = data.error.replace("##", "<br />");
        if (data.img != '') {
            $('#result').removeClass('hiddenmessage');
            $('#result').html('<img src="uploads/thumbs/' + data.img + '" /><a href="delete-background-image.php" id="clear-bg-upload"> </a>');
            //          $('#message').html('<a href="delete-background-image.php" id="clear-bg-upload">Click here</a>'); 
            //          $('#FileUploadForm').html('');
        } else {
            $('#result').removeClass('hiddenmessage');
            $('#result').html(msg);
        }
    } else {
        $('#result').removeClass('hiddenmessage');
        $('#result').html('Unknown error!');
    }
}

function StartFileUpload() {
    $('#message').html('');
    $('#FileUploadForm').ajaxSubmit({
        beforeSubmit: showRequest,
        success: showResponse,
        url: 'upload.php',
        dataType: 'json'
    });
    return false;
}
$('#fileToUpload').live('change', function () {
    StartFileUpload();
});
4

1 に答える 1

1

パスから始めましょう — HTML/JS では、セキュリティ上の懸念から、添付ファイルへのフル パスを取得できません。取得できるのはファイル名だけです。

通常、最善の方法は、ユーザーがファイルを選択したときに JavaScript を使用してファイルをサーバーにアップロードし、そのサーバーからプレビューを取得することです。ユーザーが誤ってアップロードした写真を削除できるようにする「削除」ボタンを提供できます。

これにより、アプリケーションに大きな変更が加えられます。File Uploaderプラグインをお勧めします。独自のソリューションをゼロから作成するのは、さまざまなブラウザーで多くのハックが必要になるため、非常に苦痛になります。

于 2012-12-16T15:52:53.240 に答える