Question

我有一个文件输入，我将其设置为自定义按钮，但是当用户上传文件时，我无法保留上传图像。它被替换为文件名的文本但我也想保留图像。我知道这很简单，但似乎无法弄明白。这是代码：

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;
}`

Answer 1

当你使用.text（）时，它会用文件输入的值替换你的图像。我建议在DIV中添加一个span并在其上设置当前输入的值。分离和跟踪会更容易。

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));
})

Answer 2

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

在此代码中，您必须更改一些代码：

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

注意：确保图像已经在您要上传的服务器上。

使用Jquery设置文件输入样式

2 个答案: