基本HTML: <form class="imageform" method="post" enctype="multipart/form-data" action="form.php"> <input class="photoimg" type="file" name="photoimg"> <input type="hidden" class="thumb" name="thumb" /> //隐藏图片值 </div> <img class="preview_img" src="" /> //显示图片 </form>
JQuery 操作: <script type="text/javascript"> $(function() { $("body").on("change", ".photoimg", function() { $(".imageform").ajaxSubmit({ url: "upload.php", //默认是form的action //type: type, //默认是form的method(get or post) dataType: "json", //html(默认), xml, script, json...接受服务端返回的类型 //clearForm: true, //成功提交后,清除所有表单元素的值 //resetForm: true, //成功提交后,重置所有表单元素的值 //target: '#output', //把服务器返回的内容放入id为output的元素中 //timeout: 3000, //限制请求的时间,当请求大于3秒后,跳出请求 //提交前的回调函数 beforeSubmit: function(arr,$form,options){ //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}] //jqForm: jQuery对象,封装了表单的元素 //options: options对象 //比如可以再表单提交前进行表单验证 //console.log("beforeSubmit",arr,$form,options) }, //提交成功后的回调函数 success: function(data,status,xhr,$form){ //console.log("success",data,status,xhr,$form); if(data.status){ $(".preview_img").attr("src",data.thumb).show(); $(".thumb").val(data.thumb); //console.log(data.Content) } }, error: function(xhr, status, error, $form){ // console.log("error",xhr, status, error, $form) }, complete: function(xhr, status, $form){ //console.log("complete",xhr, status, $form) } } ); return false; //阻止表单默认提交 }); }); </script>
upload.php 上传文件 $path = "uploads/"; $extArr = array("jpg", "png", "gif"); if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") { $name = $_FILES['photoimg']['name']; $size = $_FILES['photoimg']['size']; if (empty($name)) { echo '请选择要上传的图片'; exit; } $ext = extend($name); if (!in_array($ext, $extArr)) { echo '图片格式错误!'; exit; } if ($size > (1000 * 1024)) { echo '图片大小不能超过1M'; exit; } $image_name = time() . rand(100, 999) . "." . $ext; $tmp = $_FILES['photoimg']['tmp_name']; if (move_uploaded_file($tmp, $path . $image_name)) { echo json_encode(array('status'=>1,'thumb'=>$path.$image_name)); } else { echo json_encode(array('status'=>0,'thumb'=>$path.$image_name)); } exit; } exit; function extend($file_name) { $extend = pathinfo($file_name); $extend = strtolower($extend["extension"]); return $extend; }
jquery.form.js下载:jquery.form.zip