input file样式修改以及图片预览删除功能详细概括

1. input file样式修改

1.1 使用label标签+input file实现input file样式修改

通过使用label标签中的for属性和input file中的id属性相互关联，可以实现点击label标签就可以调起input file选择文件的功能，从而在外观上加以美化。代码如下：

<!--HTML代码-->
<label for="file">选择文件</label>
<input type="file" id="file">

/*CSS代码*/
label {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 6px 12px;
  cursor: pointer;
}
input[type="file"] {
  display: none;
}

1.2 使用插件实现input file样式修改

也可以使用第三方插件，如jQuery File Upload等来实现input file样式的修改，这些插件可以在上传文件时显示上传进度条、预览图片等功能，同时也具有比较好的兼容性。使用步骤：

引入jQuery和插件文件；
在HTML中添加相应的DOM结构；
通过JS调用插件方法初始化上传功能。

示例代码：

<!--HTML代码-->
<div id="fileupload">
    <form method="post" action="server/php/" enctype="multipart/form-data">
        <div class="row fileupload-buttonbar">
            <div class="col-md-7">
                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>添加文件</span>
                    <input type="file" name="files[]" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>开始上传</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>取消上传</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>删除文件</span>
                </button>
                <input type="checkbox" class="toggle">
                <span class="fileupload-process"></span>
            </div>
        </div>
        <div class="fileupload-content">
            <table class="table table-striped"><tbody class="files"></tbody></table>
            <div class="fileupload-progressbar"></div>
        </div>
    </form>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.6/js/vendor/jquery.ui.widget.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.6/js/jquery.fileupload.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.6/js/jquery.fileupload-process.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.6/js/jquery.fileupload-image.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.6/js/jquery.fileupload-validate.js"></script>

//JS代码
$(function() {
    $('#fileupload').fileupload({
        dataType: 'json',
        autoUpload: true,
        done: function(e, data) {
            $.each(data.result.files, function(index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function(e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css('width', progress + '%');
        }
    }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
});

2. 图片预览删除功能

2.1 使用FileReader API实现图片预览

通过使用FileReader API可以实现在选中图片后能够在客户端进行图片预览的功能。具体实现步骤如下：

1.监听input file的change事件；
2.通过FileReader对象读取选中图片数据；
3.将图片数据赋值给img标签的src属性进行预览。

示例代码：

<!--HTML代码-->
<input type="file" id="file">
<img id="preview">

<script>
//JS代码
document.getElementById('file').addEventListener('change', function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById('preview').setAttribute('src', e.target.result);
    }
    reader.readAsDataURL(file);
});
</script>

2.2 使用第三方插件实现图片预览删除

也可以使用第三方插件Zoomify，它可以实现图片的预览、放大、缩小、旋转等操作，并且带有删除图片的功能，使用起来也比较简单明了。使用步骤：

引入Zoomify插件及其样式文件；
在HTML中添加相应的DOM结构；
在JS中初始化插件。

示例代码：

<!--HTML代码-->
<input type="file" id="file">
<div id="zoomify"></div>

<link rel="stylesheet" href="zoomify.css">
<script src="jquery.js"></script>
<script src="zoomify.js"></script>

//JS代码
$(document).ready(function() {
    $('#zoomify').zoomify({
        path: $('#file').val(),
        zoomIn: 'btn-plus.png',
        zoomOut: 'btn-minus.png',
        rotateLeft: 'btn-rotate-left.png',
        rotateRight: 'btn-rotate-right.png',
        deleteImage: true, 
        deleteCallback: function() {
            alert('图片删除成功！');
        }
    });
});