我用的jq来写的。ajax文件上传需要设置两个属性,contentType : false,processData : false,获取数据的时候我们需要使用FromData来获取。
实例
<form action="javascript:;" id="from" method="post" onsubmit="return add()"> <table> <tr> <td>用户名</td> <td><input type="text" name="name" id="id_name" placeholder="用户名"></td> </tr> <tr> <td>邮箱</td> <td><input type="email" name="email" id="id_email" placeholder="邮箱" ></td> </tr> <tr> <td>手机号</td> <td><input type="tel" name="phone" id="id_phone" placeholder="手机号"></td> </tr> <tr> <td>密码</td> <td><input type="password" name="pwd" id="id_pwd" placeholder="密码"></td> </tr> <tr> <td>确认密码</td> <td><input type="password" name="repwd" id="id_repwd" placeholder="确认密码"></td> </tr> <tr> <td>角色</td> <td> <select name="jiaose" id="id_jiaose"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </td> </tr> <tr> <td>图片</td> <td><input type="file" name="img" id="img" value=""></td> </tr> <tr> <td></td> <td><input type="submit" value="提交"> <input type="reset" value="重置"></td> </tr> </table> </form> <script type="text/javascript"> var from = $('#from')[0]; var formData = new FormData(from); formData.append("imgfile",$('#img')[0].files[0]); $.ajax({ type: "POST", url: "/login/insertInto", data: formData, contentType : false, processData : false, // 使数据不做处理 success: function(msg){ if (msg.code==1) { alert( msg.msg ); // location.href='/login/login'; }else{ alert(msg.msg); } } }) } </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例