本文共 3299 字，大约阅读时间需要 10 分钟。

���������AJAX���������������������������

������������������������������������AJAX���������������������������������������������������������������������������������������������������������������������

������������������

������AJAX���������������������������FormData������������������������������������������input���������������������������������

���������������JavaScript������FormData������������������������

$("#Save").click(function () {
  var data = new FormData();
  var imgfile = $("#inputfile");
  var fileobj = imgfile.get(0).files[0]; //���������������������
  data.append("img", fileobj); //������������������FormData���������
  
  $.ajax({
      url: "../handler/GetDataHandler.ashx",
      type: "post",
      data: data,
      async: false,
      dataType: "JSON",
      processData: false,
      contentType: false,
      success: function (data) {
          location.reload(); //���������������������������
      }
  });
});

���������������������������processData���contentType������������false���������������������������������������������

������������������������

���������������������������������������������������������������

HttpPostedFile file = context.Request.Files["img"];
string uploadPath = HttpContext.Current.Server.MapPath(
    @context.Request["folder"] + "\\"
) + "..\\upload\\";
if (!Directory.Exists(uploadPath)) {
    Directory.CreateDirectory(uploadPath);
}
string filepath = "";
if (file != null) {
    string cfilename = file.FileName;
    string aFirstName = cfilename.Substring(
        cfilename.LastIndexOf("\\") + 1,
        cfilename.Length - cfilename.LastIndexOf("\\") - 1
    ); //���������������
    
    string aLastName = cfilename.Substring(
        cfilename.LastIndexOf(".") + 1,
        cfilename.Length - cfilename.LastIndexOf(".") - 1
    ); //���������������
    
    aFirstName = DateTime.Now.Ticks.ToString() + "-" + Guid.NewGuid();
    var newfilename = aFirstName + "." + aLastName;
    file.SaveAs(uploadPath + newfilename);
    filepath = "/upload/" + newfilename;
}

���������������������������������������������������������������������������������

������������������

������������������FileReader������������������������������ previews:

var preview = document.querySelector('#preview');
var fileInput = document.querySelector('#inputfile');
fileInput.addEventListener('change', function () {
  var file = this.files[0];
  if (file.type.indexOf("image") == 0) { //���������������������������
      var reader = new FileReader();
      reader.readAsDataURL(file); //������Base64������
      
      reader.onload = function (e) {
          // Base64������
          var imgURL = e.target.result;
          preview.style.backgroundImage = 'url(' + imgURL + ')';
          fileInput.style.display = 'none'; //������input
      };
  }
});

������������������

������������������������������������������AJAX������������������������������������������������������������������������������