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