IE中带有预览功能的上传文件样式按钮

Question

我已经设置了文件上传按钮的样式并在上传之前添加了预览图像...基本上所有浏览器都可以在除 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 中被扭曲了，但我想在一个表单中使用它，因为表单不能嵌套......我有点卡住了......除了我现在有两个表单，但我想该文件上传已提交，就像现在一样发送，而无需将其包装成自己的形式。

这是我正在使用的脚本：

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

Answer 1

让我们从路径开始 - 在 HTML/JS 中，出于安全考虑，您无法获得附件的完整路径。你能得到的只是文件名。

通常最好的方法是在用户选择文件时使用 JavaScript 将文件上传到服务器，然后从该服务器获取预览。您可以提供一些“删除”按钮，使用户能够删除他们错误上传的图片。

这将在您的应用程序中强制进行深度更改。我推荐File Uploader 插件。从头开始编写自己的解决方案将非常痛苦，因为它需要针对不同的浏览器进行许多 hack。