一、实现图片上传方法一
html的写法:
<
form
action
=
"handle.php"
name
=
"form"
method
=
"post"
enctype
=
"multipart/form-data"
>
<
input
type
=
"file"
name
=
"file"
/>
<
input
type
=
"submit"
name
=
"submit"
value
=
"上传"
/>
</
form
>
php后台实现:
$file
=
$_FILES
[
'file'
];
//得到传输的数据
//得到文件名称
$name
=
$file
[
'name'
];
$type
=
strtolower
(
substr
(
$name
,
strrpos
(
$name
,
'.'
)+1));
//得到文件类型,并且都转化成小写
$allow_type
=
array
(
'jpg'
,
'jpeg'
,
'gif'
,
'png'
);
//定义允许上传的类型
//判断文件类型是否被允许上传
if
(!in_array(
$type
,
$allow_type
)){
//如果不被允许,则直接停止程序运行
return
;
}
//判断是否是通过HTTP POST上传的
if
(!
is_uploaded_file
(
$file
[
'tmp_name'
])){
//如果不是通过HTTP POST上传的
return
;
}
$upload_path
=
"D:/now/"
;
//上传文件的存放路径
//开始移动文件到相应的文件夹
if
(move_uploaded_file(
$file
[
'tmp_name'
],
$upload_path
.
$file
[
'name'
])){
echo
"Successfully!"
;
}
else
{
echo
"Failed!"
;
}
二、利用uploadify实现无刷新并且带进度条的上传
首先下载uploadify插件,保存在项目中的某个文件夹下面,然后引入三个文件
首先下载uploadify插件,保存在项目中的某个文件夹下面,然后引入三个文件
link
href
=
"js/uploadify/uploadify.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"js/uploadify/jquery.min.1.7.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
js
/uploadify/jquery.uploadify.min.js"></
script
>
然后引用以下代码:
<script type=
"text/javascript"
>
$(
function
(){
$(
".uploadbutton"
).each(
function
(){
bidtype=
"上传"
;
$(
this
).uploadify({
swf:
'js/uploadify/uploadify.swf'
,
uploader:
"handle.php"
,
//处理上传的php文件或者方法
multi:
true
,
//是否开启一次性上传多个文件
queueSizeLimit:20,
//最大允许上传的文件数量
buttonText: bidtype,
//按钮文字
height: 34,
//按钮高度
width: 82,
//按钮宽度
auto:
false
,
//选择完图片以后是否自动上传
method:
'post'
,
fileTypeExts:
"*.jpg;*.png;*.gif;*.jpeg;"
,
//允许的文件类型
fileTypeDesc:
"请选择图片文件"
,
//文件说明
postData:{},
formData: {
"imgType"
:
"normal"
,
"timestamp"
:
"asdfsa"
,
"token"
:
"48f262516b3912a060d21ef6af564668"
},
//提交给服务器端的参数
onUploadSuccess:
function
(file, data, response) {
//一个文件上传成功后的响应事件处理
var
data = $.parseJSON(data);
}
});
})
});
</script>
<body>
<span id=
"commercial_upload"
class=
"uploadbutton"
></span>
</body>
<
link
href
=
"js/uploadify/uploadify.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"js/uploadify/jquery.min.1.7.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
js
/uploadify/jquery.uploadify.min.js"></
script
>
然后引用以下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<script type= "text/javascript" > $( function (){ $( ".uploadbutton" ).each( function (){ bidtype= "上传" ; $( this ).uploadify({ swf: 'js/uploadify/uploadify.swf' , uploader: "handle.php" , //处理上传的php文件或者方法 multi: true , //是否开启一次性上传多个文件 queueSizeLimit:20, //最大允许上传的文件数量 buttonText: bidtype, //按钮文字 height: 34, //按钮高度 width: 82, //按钮宽度 auto: false , //选择完图片以后是否自动上传 method: 'post' , fileTypeExts: "*.jpg;*.png;*.gif;*.jpeg;" , //允许的文件类型 fileTypeDesc: "请选择图片文件" , //文件说明 postData:{}, formData: { "imgType" : "normal" , "timestamp" : "asdfsa" , "token" : "48f262516b3912a060d21ef6af564668" }, //提交给服务器端的参数 onUploadSuccess: function (file, data, response) { //一个文件上传成功后的响应事件处理 var data = $.parseJSON(data); } }); }) }); </script> <body> <span id= "commercial_upload" class= "uploadbutton" ></span> </body> |
样式如下
当然此按钮的样式我改动过,大家可以根据自己的需要修改样式文件,改变此按钮的样式
同样的php代码 handle.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
$file = $_FILES [ 'Filedata' ]; //得到传输的数据 //得到文件名称 $name = $file [ 'name' ]; $type = strtolower ( substr ( $name , strrpos ( $name , '.' )+1)); //得到文件类型,并且都转化成小写 $allow_type = array ( 'jpg' , 'jpeg' , 'gif' , 'png' ); //定义允许上传的类型 //判断文件类型是否被允许上传 if (!in_array( $type , $allow_type )){ //如果不被允许,则直接停止程序运行 return ; } //判断是否是通过HTTP POST上传的 if (! is_uploaded_file ( $file [ 'tmp_name' ])){ //如果不是通过HTTP POST上传的 return ; } $upload_path = "D:/now/" ; //上传文件的存放路径 //开始移动文件到相应的文件夹 if (move_uploaded_file( $file [ 'tmp_name' ], $upload_path . $file [ 'name' ])){ echo "Successfully!" ; } else { echo "Failed!" ; } |
以上两种方式上传可以说PHP处理的原理是相同的,只是前台显示的样式不同,第二种方式是无刷新,并且带有返回值,可以方便我们做其它的处理。虽然常用,但是总归会受限制,使用起来不是很灵活。
随着html5的发展的越来越成熟,我们可以利用h5中的一些方法实现上传功能,此时后台PHP的处理代码完全不同于以上两种方式,并且使用起来很灵活。由于篇幅限制,本篇我不向大家介绍这种方式,有兴趣的可以参考php+html5实现无刷新图片上传教程,希望大家会喜欢。
如对本文有疑问,请提交到交流社区,广大热心网友会为你解答!! 点击进入社区
最新评论