input[type='file']样式美化及实现图片预览

要实现input[type='file']样式美化及图片预览，可以使用以下步骤：

1. 创建一个label元素，将input[type='file']元素隐藏在label里面，并设置label的样式。

2. 给input[type='file']元素设置一个change事件，当选择文件后触发事件。

3. 在change事件中获取选择的文件，并将文件转换成URL格式，用于预览。

4. 创建一个img元素，设置src属性为URL格式的文件，即可实现预览效果。

以下是一个简单的示例代码：

<!-- HTML部分 -->
<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> 选择文件
</label>
<input id="file-upload" type="file"/>

<div id="preview"></div>

/* CSS部分 */
.custom-file-upload {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    border-radius: 4px;
}

#preview {
    width: 200px;
    height: 200px;
    margin-top: 20px;
    border: 1px solid #ccc;
}

// JavaScript部分
var input = document.getElementById("file-upload");
var preview = document.getElementById("preview");

input.addEventListener("change", function() {
    var file = this.files[0];
    var reader = new FileReader();
    
    reader.addEventListener("load", function() {
        preview.innerHTML = '<img src="' + reader.result + '" />';
    }, false);
    
    if (file) {
        reader.readAsDataURL(file);
    }
}, false);

以上代码中，我们用label元素包裹隐藏的input[type='file']元素，并设置了一个自定义样式。当用户点击“选择文件”按钮时，实际上是触发了input[type='file']元素的点击事件，从而弹出系统文件选择框。

在input[type='file']元素的change事件中，我们获取选择的文件，并使用FileReader对象将文件转换成URL格式。最后，我们创建一个img元素，将URL格式的文件设置为其src属性，即可实现预览效果。

需要注意的是，由于安全性限制，我们无法直接读取本地文件的路径，因此需要使用FileReader对象将文件转换成URL格式才能进行预览。