首页 > 技术分享 > AJAX
收藏

JQuery中$.ajax配合PHP实现文件无刷新上传(无进度条)

10/27 09:57
大潇博客 原创文章,转载请标明出处
举例在页面中上传图片,上传成功后显示该图片,均在页面不刷新的情况下进行

前端的js代码为:
$(function(){
  $("input[name='myfile']").change(function(){
    var form = document.getElementById("form");
    var data = new FormData(form);
    $.ajax({
      url: "ajax.php",
      type: "POST",
      data: data,
      processData: false,   // 告诉jQuery不要去处理发送的数据
      contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
      beforeSend: function(){
        $("#img").html("正在上传...");
      },
      success: function(res){
        var img = "<\img src='"+res+"' width=500 />"
        $("#img").html(img);
      },
      error: function(){
        alert("上传失败");
      }
    });
  });
});
后端代码为(简洁):
代码和ajax正常请求一样,不过是加了processData: false和contentType: false两行代码,告诉jQuery不要去处理发送的数据,不要去设置Content-Type请求头,只发送由new FormData(document.getElementById("form"))得到的整个form表单的参数,后端PHP用$_FILES正常接收参数即可。
 
打赏

阅读排行

大家都在搜

博客维护不易,感谢你的肯定
扫码打赏,建议金额1-10元
  • 15601023311