仿ajax文件上传预览

【html】

<from method="post" action="t1.php">图片：<input type="file" name="pic" id="pic"/><br/>      <input type="hidden" name="bpic" value="" id="bpic"/>     <p>       <img src="default.png" alt="" id="bpic_img">     </p>     <input type="submit" value="提交" onclick="return deal_form();"/></form>

【js】

//需要引入jquery.js插件   //需要引入jquery.form.js插件 $(function(){   var act = "<form class='myupload' action='t2.php' method='post' enctype='multipart/form-data'></form>";   //处理第一个图片上传部分   $("#pic").wrap(act);      //文件选择触发子表单提交   $("#pic").change(function(){       $(this).parent(".myupload").ajaxSubmit({   dataType:  'json',   success: function(data) {               var src = data.pic;               //更改预览图像地址               $('#bpic_img').attr("src",src);               $('#bpic').val(data.name);   },   error:function(xhr){alert("图片上传失败");      }});    });  });  //主表单提交时 删掉所有内嵌表单  function deal_form(){$('.myupload').remove();return true;  }

【t2.php】

//实际上就跟普通文件上传一个意思 //然后json返回封装结果即可 $tmp = $_FILE['pic']['tmp_name']; ... echo json_encode(      array(        'name'=>$filename,'pic'=>$filepath      )   );