php fileinput实现多图片批量上传
程序员文章站
2022-05-30 08:34:50
...
<script src="__LIB__/bootstrap/js/jquery.min.js"></script>
<script src="__LIB__/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="__LIB__/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="__LIB__/fileinput/css/fileinput.min.css">
<script src="__LIB__/fileinput/js/fileinput.js"></script>
<script src="__LIB__/fileinput/js/locales/zh.js"></script>
直接上代码了。上面的是要引入的bootstrap,和fileinput文件
下面是前台样式+js
<div class="row cl">
<label class="form-label col-xs-3 col-sm-3">商品图片详情:</label>
<div class="formControls col-xs-6 col-sm-6">
<input type="file" class="file" id="img_url1" name="image_data[]" accept="image/*" multiple></div>
</div>
<script>
// var input_value = $(".input-text").val()
fodderType = function() {
return $("#ww").val();
};
//这是我要携带的参数,可以不写
fodderTypes = function() {
return $("#ws").val();
};
$("#img_url1").fileinput({
language: 'zh',
uploadUrl: "{:Url('/admin/xiangce/upload/')}",
uploadAsync: false, //设置上传同步异步 此为同步
maxFileSize: 50000,
uploadExtraData: function(previewId, index) { //额外参数的关键点
var obj = {};
obj.gid = fodderType();
obj.tuname = fodderTypes();
console.log(obj);
return obj;
}
});
</script>
控制器所需方法。
public function upload(){
//$request = Request::instance();
//$goods_data = $request->param();
foreach($_FILES["image_data"]["name"] as $key=>$data){
$img_name[] = $data;
}
foreach($_FILES['image_data']['tmp_name'] as$k=>$v) {
$img_url[]=$v;
}
for($i=0;$i<count($img_name);$i++){
$path = './tmp/uploads/' . $img_name[$i];
$v=$img_url[$i];
move_uploaded_file($v,$path);
}
return 1; //这个返回值必须要
}
附个图: