[FILE API]利用Javascript上传图片

1.HTML结构

<label for="file-input">File:</label>
<input type="file" id="file-input" />
/*<img src="" alt="" accept="image/*" style="max-width: 250px">*/
<img src="" alt="" style="max-width: 250px">

input的accept属性需要ie10的支持所以后面用js来判断。

2.上传API

$(function() {
  var $fileInput = $('input[type=file]');
  var $imageArea = $('img');
  var fileInfo;

  $fileInput.on('change', getFileInfo);

  function getFileInfo(e) {
    var file = e.target.files[0];
    var reader = new FileReader();

    reader.onload = (function(imageFile) {
      return function(e) {
         fileInfo = e.target.result;
         $imageArea.attr('src',fileInfo);
      }
    })(file);
    reader.readAsDataURL(file);
  }
});

这样就可以实现功能了

3.判断文件类型

(/\.(jpg|jpeg|png)/i).test(file.name)

完整代码为

$(function() {

var $fileInput = $('input[type=file]');

var $imageArea = $('img');

var fileInfo;

  $fileInput.on('change', getFileInfo);

  function getFileInfo(e) {
    var file = e.target.files[0];
    if (!(/\.(jpg|jpeg|png)/i).test(file.name)) {
    	alert("只支持jpg/jpeg/png类型");
	}else{
	    var reader = new FileReader();

	    reader.onload = function(e) {
	         fileInfo = e.target.result;
	         $imageArea.attr('src',fileInfo);
	    }
	    reader.readAsDataURL(file);
     }
  }
});

4.参考资料

• 通过 File API 使用 JavaScript 读取文件
• Working with the File API