1

カスタム ボタンにスタイル設定したファイル入力がありますが、ユーザーがファイルをアップロードするときにアップロード イメージを保持できません。ファイル名のテキストに置き換えられますが、画像も保持したいと思います。私はそれが単純なことだと知っていますが、それを理解できないようです。コードは次のとおりです。

HTML:

 <div id="file"><img src="~/Images/choosefile.png" /></div>
 <input type="file" name="file"/>

Javascript:

var wrapper = $('<div/>').css({ height: 0, width: 0, 'overflow': 'hidden' });
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function () {
    $this = $(this);
    $('#file').text($this.val().substring(12, 75));
})

$('#file').click(function () {
    fileInput.click();
}).show();

CSS:

`#file 
{
    display:none;
    cursor: pointer;
}​`

**更新 - 誰かがそれを使用したい場合、これがどのようになったかです* * *

HTML:

 <div id="file" style="margin-right:10px;"><img src="~/Images/choosefile.png" style="margin-bottom:-5px; padding-right:10px;"/><span style="border-left-width:10px;"></span></div>
 <input type="file" name="file"/>

Javascript:

var wrapper = $('<div/>').css({ height: 0, width: 0, 'overflow': 'hidden' });
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function () {
    $this = $(this);
    $('#file>span').text($this.val().substring(12, 75));
})

$('#file').click(function () {
    fileInput.click();
}).show();

CSS:

`#file 
{
    display:none;
    cursor: pointer;
}​`
4

2 に答える 2

0

.text() を使用すると、画像がファイル入力の値に置き換えられます。DIV 内にスパンを追加し、現在の入力の値を設定することをお勧めします。分離して追跡しやすくなります。

HTML

<div id="file"><img src="~/Images/choosefile.png" /><span></span></div>
<input type="file" name="file"/>

JQuery

var fileInput = $(':file').wrap(wrapper);
fileInput.change(function () {
    $this = $(this);
    $('#file>span').text($this.val().substring(12, 75));
})
于 2012-11-02T14:29:37.920 に答える
0 
fileInput.change(function () {
    $this = $(this);
    $('#file').text($this.val().substring(12, 75));
})

このコードでは、いくつかのコードを変更する必要があります:

fileInput.change(function () {
    $this = $(this);
       $('#file').html('<img src="'+$this.val()+'" />');
})

注: アップロード元のサーバーに画像が既にあることを確認してください。

于 2012-11-02T14:42:21.203 に答える