仿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="提交" οnclick="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
      )
   );