使用jquery.form.js实现图片上传的方法
本文实例讲述了使用jquery.form.js实现图片上传的方法。分享给大家供大家参考，具体如下：
testupfile2.php
<?php
header('Content-type:text/html;charset=utf-8');
include_once'includes/common.inc.php';
if(!empty($_FILES['upfile'])){
//文件格式
$image=array('image/jpg',
'image/jpeg',
'image/png',
'image/pjpeg',
'image/gif',
'image/bmp',
'image/x-png'
);
$updir=$_SERVER['DOCUMENT_ROOT'].$_config['g']['baseUrl'].'/attached/images/';
$upfile=$_FILES['upfile'];
$name=$upfile['name'];
$ext=substr($upfile['name'],strpos($upfile['name'],'.'));
$upname=md5(time().rand(1,1000)).$ext;
$type=$upfile['type'];
$size=$upfile['size'];
$tmp_name=$upfile['tmp_name'];
$error=$upfile['error'];
$ok=0;
foreach($imageas$key=>$value){
if($type==$value)$ok=1;
}
if($ok=='1'&&$error=='0'){
move_uploaded_file($tmp_name,$updir.$upname);
//echo'<br>'.$tmp_name.'<br>'.$upname.'<br>'.$updir.'<br>'.$ext.'上传成功';
//echo'上传成功';
echo$upname;
//$im=$updir.$upname;
//echo$im;
//echo'<imgsrc='.$updir.$upname.'/>';
//$views->assign('image',$upname);
//$views->display('default/testupfile.html');
}
elseecho'上传失败2';
}
elseecho'上传失败1';
?>
testupfile.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="<!--{$baseUrl}-->/scripts/jquery.js"></script>
<scripttype="text/javascript"src="<!--{$baseUrl}-->/scripts/jquery.form.js"></script>
<scripttype="text/javascript">
$(function(){
//jquery.formimage1
$("#upimage").bind("click",function(){
if($("#upfile").val()==""){
alert("请选择一个图片文件,再点击");
return;
}
$("#form1").ajaxSubmit({
url:"testupfile2.php",
type:"POST",
//date:"upfile=upfile",
success:function(response){
alert(response);
$("#ln").empty();
$("#ln").append("<imgsrc='<!--{$baseUrl}-->/attached/images/"+response+"'width='100'height='60'/>");
$("#im1").val(response);
},
error:function(msg){
alert("出错了");
}
});
});
//jquery.formimage2
$("#upimage2").bind("click",function(){
if($("#upfile2").val()==""){
alert("请选择一个图片文件,再点击2");
return;
}
$("#form2").ajaxSubmit({
url:"testupfile2.php",
type:"POST",
//date:"upfile=upfile2",
success:function(response2){
alert(response2);
$("#ln2").empty();
$("#ln2").append("<imgsrc='<!--{$baseUrl}-->/attached/images/"+response2+"'width='100'height='60'/>");
$("#im2").val(response2);
},
error:function(msg){
alert("出错了");
}
});
});
});
</script>
</head>
<body>
文件上传
<formenctype="multipart/form-data"id="form1"method="post"action="">
文件:
<inputtype="file"name="upfile"id="upfile"><inputtype="button"id="upimage"value="图片上传1">
<inputtype="text"name="im1"id="im1"value=""/>
</form>
<formenctype="multipart/form-data"id="form2"method="post"action="">
文件:
<inputtype="file"name="upfile"id="upfile2"><inputtype="button"id="upimage2"value="图片上传2">
<inputtype="text"name="im2"id="im2"value=""/>
</form>
<divid="ln">tu</div><br>
<divid="ln2">tu2</div>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQueryform操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。