3步实现ajax传递input的file参数(表单上传和ajax文件异步上传)

2020-03-17 建站知识 浏览 手机预览
文章来源:http://www.imtr.cn/html/n246.html

在做项目的过程中遇到要将form表单提交转为ajax方式提交,但是表单中的file参数无法通过传统的ajax方式传递,下面就主要的ajax上传写出示例!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理!

1、将form元素的属性action、enctype、method去掉,添加id="form",form元素就变为<form id="form">

2、引入 jquery-1.8.2.min.js,右键选择“另存为”

3、引入 jquery.form.js,右键选择“另存为”

4、提交按钮增加 onclick="add_ajax()" 并把 type="submit" 修改为 type="button"
   例如:<input type="button" value="提 交" onclick="add_ajax()" />

5、把ajax代码放在页面最底部(注意不能放在jquery库之前)

<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.form.js"></script>
<form id="form">
  <div class="ind">姓名<input type="text" name="name" id="name" class="name" /></div>		  
  <div class="ind">头像<input type="file" name="image" id="image" class="image" accept="image/png,image/jpeg"/></div>
  <input type="button" value="提 交" onclick="add_ajax()" />
</form>

accept="image/png,image/jpeg"的意思是只能选择png和jpg后缀的图片,也可以使用accept="image/*"来设定全部类型的图片。

<script type="text/javascript">
  function add_ajax() {
    document.getElementById("form").encoding = "multipart/form-data".enctype = "multipart/form-data";
    var option = {
      url: "ajax.php",//提交到后台文件
      type: "post",
      success: function(data) {
        alert(data);//弹窗显示PHP返回的值
        $("#deok").html(data);//以html的形式显示在指定id的元素里
        $('#form')[0].reset();//提交后清除表单填写的值
        $(this).val("");//清空上次input框里的数据
        $("#deok").val(aaa["boxnum"]);//向input框里写入新数据
      }
    };
    $("#form").ajaxSubmit(option);
    return false;
  }
</script>

延伸阅读:
当表单的属性设置为"disabled"时,提交表单时,select的值无法传递,需要提交前移除disabled属性,使用$("#role").removeAttr("disabled");即可(提交前移除id="role"的disabled属性)

原文地址:http://www.imtr.cn/html/n246.html
  • 如果你的问题还没有解决,可以点击页面右侧的“ ”,站长收到问题后会尽快回复解决方案到你的邮箱。
  • 创造始于问题,有了问题才会思考,有了思考,才有解决问题的方法,才有找到独立思路的可能。 —— 陶行知