【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 ) );