iframe 上传
upload.html
|
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
30
31
32
33
34
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<script src=
"https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"
></script>
</head>
<body>
<iframe id=
"upload_target"
name=
"upload_target"
src=
"upload.php"
style=
"width:0;heigth:0;overflow:hidden;border:0;position: absolute; left:-500px;"
></iframe>
<img id=
"tag_img"
src=
"http://avatar.csdn.net/C/2/1/1_shenlingsuifeng.jpg"
/>
<form enctype=
"multipart/form-data"
action=
"upload.php"
method=
"post"
target=
"upload_target"
>
<input type=
"file"
id=
"fileipt"
name=
"userfile"
class=
"file"
value=
""
/>
<input type=
"submit"
name=
"uploadimg"
value=
"上传"
id=
"submit"
hidden />
</form>
<script type=
'text/javascript'
>
var
lastFileName;
$(
"#fileipt"
).change(
function
() {
var
fileName = $(
this
).val();
var
pos = fileName.lastIndexOf(
"\\"
);
fileName = fileName.substr(pos+1, fileName.length);
// 截取出文件名 因为会带路径
lastFileName = fileName;
$(
"#submit"
).click();
});
function
stopSend($url) {
$(
"#tag_img"
).attr(
"src"
,$url);
}
</script>
</body>
</html>
|
upload.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?php
/**
* Created by PhpStorm.
* User: chenxiaolong
* Date: 7/21/17
* Time: 10:24
*/
//var_dump($_FILES);
$file
=
$_FILES
[
'userfile'
];
if
(
$file
[
'size'
] != 0) {
$name
=rand(0,500000).
dechex
(rand(0,10000)).
".jpg"
;
move_uploaded_file(
$file
[
'tmp_name'
],
$name
);
if
(
$name
) {
echo
"<script>parent.stopSend('$name')</script>"
;
}
}
|
ajax 无刷新上传图片
|
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<
button
id
=
"J_headimg"
style
=
"font-size: 12px;margin-left: 10px;width: 70px;height: 30px;background: #10AD5A;color: #fff;"
>修改头像</
button
>
<
input
type
=
"file"
name
=
"pic"
id
=
"pic"
hidden
accept
=
"image/*"
/>
<
input
type
=
"text"
id
=
"headimg"
name
=
"headimg"
hidden>
<
script
>
$("#J_headimg").click(function() {
$("#pic").click();
return false;
});
$("#pic").change(function() {
var $that = $(this);
var imgPath = $(this).val();
if (imgPath == "") {
alert("请选择上传图片！");
return;
}
//判断上传文件的后缀名
var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
if (strExtension != 'jpg' && strExtension != 'gif'
&& strExtension != 'png' && strExtension != 'bmp' && strExtension != 'jpeg') {
alert("请选择图片文件");
return;
}
var formData = new FormData();
formData.append('file', $that[0].files[0]);// php 用$_FILES['file']接收
console.log($that[0].files[0]);
$.ajax({
type: "POST",
url: "__URL__/uploadimg",
data: formData,
cache: false,
processData: false,// 需要加这两个参数
contentType: false,
success: function(data) {
var obj = JSON.parse(data);
if(obj.status == 0) {
$("#preimg").attr("src","Public/Upload/" + obj.data);
$("#headimg").val(obj.data);
} else {
alert(obj.data);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("上传失败，请检查网络后重试");
}
});
});
</
script
>
|
对应uploadimg方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
public function uploadimg() {
$file = $_FILES['file'];
$arr = array('jpg'=>'image/jpeg','png'=>'image/png','gif'=>'image/gif','bmp'=>'image/bmp');
if($ext = array_search($file['type'],$arr)) {
$rand = uniqid();
$filename = "Public/Upload/avatar/{$rand}.{$ext}";
} else {
exit(json_encode(array('status'=>2,'data'=>'只支持图片上传')));
}
$r = move_uploaded_file($file['tmp_name'],$filename);
if($r) {
exit(json_encode(array('status'=>0,'data'=>"avatar/$rand.$ext")));
} else {
exit(json_encode(array('status'=>1,'data'=>'上传失败')));
}
}
|
