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，但我想在表单中使用它，因为表单不能嵌套......我有点卡住了......除了我现在有两个表单，但我想要那个文件上传像现在一样提交发送，而无需将其包装成自己的形式。

这是我正在使用的脚本：

    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 将文件上传到服务器，然后从该服务器获取预览。您可以提供一些“删除”按钮，使用户能够删除他们错误上传的图片。

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

于 2012-12-16T15:52:53.240 回答