关于HTML中上传图片

值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data,method必须指定为post，浏览器才会认识并正确执行。

但是还有一点，浏览器只允许用户点击来选择本地文件，用JavaScript对的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径：
但是有个方法可以，利用File和FileReader两个主要对象，可以获得文件信息并读取文件。

HTML文件：

<form method="post" enctype="multipart/form-data" id="file_upload">
　　<p>图片预览：</p>
　　<div id="preview"></div>
　　<p>
　　　　<input type="file" id="test-image-file" name="test" accept="image/gif, image/jpeg, image/png, image/jpg">
　　</p>
   <p id="test-file-info"></p>
</form>

CSS文件：

#preview {
                border: 1px solid #ccc;
                width: 50%;
                height: 200px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center center;
            }

JavaScript：

<script type="text/javascript">
            var
                fileInput = document.getElementById('test-image-file'),
                info = document.getElementById('test-file-info'),
                preview = document.getElementById('test-image-preview');
            // 监听change事件:
            fileInput.addEventListener('change', function() {
                        // 清除背景图片:
                        preview.style.backgroundImage = '';
                        // 检查文件是否选择:
                        if (!fileInput.value) {
                            info.innerHTML = '没有选择文件';
                            return;
                        }
                        // 获取File引用:
                        var file = fileInput.files[0];
                        //判断文件大小
                        var size = file.size;
                        if (size >= 1 * 1024 * 1024) {
                            alert('文件大小超出限制');
                            return false;
                        }
                        // 获取File信息:
                        info.innerHTML = '文件名称: ' + file.name + '<br>' +
                            '文件大小: ' + file.size + '<br>' +
                            '上传时间: ' + file.lastModifiedDate;
                        if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
                                alert('不是有效的图片文件!');
                                return;
                            }
                            // 读取文件:
                            var reader = new FileReader();
                            reader.onload = function(e) {
                                var
                                    data = e.target.result;         
                                preview.style.backgroundImage = 'url(' + data + ')';
                            };
                            // 以DataURL的形式读取文件:
                            reader.readAsDataURL(file);
                        });
        </script>