这是我面试时被考到的题目，当时是说可以用插件，只要把功能写出了即可，我是我没有准备，上哪找插件去，就自己写吧，可是百度了很久也没有找到如意的，导致到手的鸭子飞了，希望能帮到有用之人
1，多图片上传同时带预览：难点在jQuery，
这是写好的demo复制粘贴可用
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<div id="inp">
<input type="file" style="display:none" name="file" style="width:150px;" />
</div>
<input type="button" id="btn" value="+">
<input type="submit" value="上传">
<div id="img"></div>
</form>
</body>
</html>
<script>
$(function () {
var i=0;
$("#btn").click(function () {
i++
$("input[name='file']").click();//当按钮被点击时给这个元素加点击事件
})
//这个是未来事件，jQuery在1.9以后没有live（）了，取而代之的是delegate();
$("#inp").delegate('input[name="file"]','change',function(e){
var input='<input type="file" style="display:none" name="file" style="width:150px;" />';
$("#inp").append(input);
var files=e.target.files;//获取对象中的文件信息
//这是一个匿名函数可以自动执行，同时又是一个闭包函数：不需传参调用函数外的参数files
// for(var i=0;i<files.length;i++) {
(function () {
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function () {
var img = reader.result;
$("#img").append("<img width='150' height='150' src='" + img + "'/>");
}
})();
// }
$(this).attr('name','file'+i);
})
})
</script>
下面是PHP文件
public function index(){
if($_FILES){
foreach($_FILES as $v){
if(!empty($v['name']) && !empty($v['tmp_name'])){
$name=$v['name'];
//通过pathifo获取文件扩展名
$extension=pathinfo($name)['extension'];
$filename=time().mt_rand(1,9999999).'.'.$extension;
$type=$v['type'];
$tmp_name=$v['tmp_name'];
$error=$v['error'];
if($type=='image/jpeg' && $error==0){
move_uploaded_file($tmp_name,"./file/".$filename);
}else{
echo "<script>alert('文件格式不正确');location.reload();</script>";
}
}
}
}
include_once ("./uplode.html");
}
1623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
