概述
web页面
<form name="form" id="brand" method="post" autocomplete=off>
<input type='file' id='logo' name='logo' class='hidden'/>
<input type="hidden" name='file_name' value='logo'/>
<div class='hidden' id='goodstype_list'>
{notempty name='goodstype_list'}<input type='hidden' name='goods_type[]' value="{$goodstype_list[0]['goods_type_id']}" id='row0'/>
{/notempty}</div>
<table class="table">
<thead>
<tr>
<th class="partition" colspan="99">{$title}</th>
</tr>
</thead>
<tbody>
<tr>
<td class="w100 text-center"><i class="necessary">*</i>品牌中文名称</td>
<td>
<input name="name_cn" id="name_cn" type="text" class="w350 fn-left" value="">
<label id="name_cn-error" class="error" for="name_cn"></label>
</td>
</tr>
<tr>
<td class="w100 text-center">品牌英文名称</td>
<td>
<input name="name_en" id="name_en" type="text" class="w350" value="">
<div id="form-error" class="form-error"></div>
</td>
</tr>
<tr>
<td class="w100 text-center"><i class="necessary">*</i>品牌首字母</td>
<td>
<input name="first_word" id="first_word" type="text" class="w350 fn-left" value="">
<div class="form-control-box fn-left">
<button id="auto" type='button' class="form-control-btn">自动获取</button>
</div>
<label id="first_word-error" class="error" for="first_word"></label>
</td>
</tr>
<tr>
<td class="w100 text-center"><i class="necessary">*</i>logo</td>
<td>
<input name="logo_pic" id="logo_pic" type="text" class="w350 fn-left" value="" />
<div class="form-control-box fn-left">
<ul>
<li><a href="javascript:void(0)" class="ml5 mr5" id="upload">[上传]</a></li>
<li><a href="javascript:void(0)" id="preview">[预览]</a></li>
</ul>
</div>
<label id="logo_pic-error" class="error" for="logo_pic"></label>
</td>
</tr>
<tbody id="goods_type_list">
<tr>
<td class="text-center"><a class="add" id="add" href="javascript:void(0)">[+]</a>所属商品类型</td>
<td>
<select class="w150 select" id='row0_one'>
<option>---请选择商品模型---</option>
<notempty name="goodstype_list">
{volist name="goodstype_list" id="goodstype"}
<option value="{$goodstype['goods_type_id']}" is_final='{$goodstype.is_final}'>{$goodstype['goods_type_name']}</option>
{/volist}
</notempty>
</select>
<select class="w150 select hidden" id='row0_two'></select>
<select class="w150 select hidden" id='row0_three'></select>
<select class="w150 select hidden" id='row0_four'></select>
</td>
</tr>
</tbody>
<tr>
<td class="w100 text-center"><i class="necessary"></i>排序</td>
<td>
<input name="sort_order" id="sort_order" type="text" class="w150" value="50">
<div id="form-error" class="form-error"></div>
</td>
</tr>
<tr class="text-center">
<td>状态</td>
<td>
<input type="radio" name="is_show" value="1" id="tj" checked /><label for="tj">显示</label>
<input type="radio" name="is_show" value="0" id="open" /><label for="open">隐藏</label>
</td>
</tr>
<tr>
<td></td>
<td>
<input class="submit" type="submit" value="提交">
</td>
</tr>
</tbody>
</table>
</form>
js处理
使用fileupload插件,需要先引入以下几个文件:
<script type="text/javascript" src="__JS__/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="__JS__/fileupload/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="__JS__/fileupload/jquery.ui.widget.js"></script>
<script type="text/javascript" src="__JS__/fileupload/jquery.fileupload.js"></script>
【备注】注意以上几个文件的先后顺序,jquery.fileupload.js一定要最后引入
$("#logo").fileupload({
type:'post',
autoUpload: true,//是否自动上传
url:'{:url('Brand/uploads')}',//上传地址
dataType: 'json',
add:function(e,data){
var uploadErrors = [];
var acceptFileTypes = /^image/(gif|jpe?g|png)$/i;
if(!data.originalFiles[0]['type'].length || (data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type']))) {
oWinArt.art.dialog({
title:'温馨提示',
icon:'warning',
lock:true,
drag:false,
content: '亲,您上传的为非图片文件,请上传图片类型哦',
ok:true
});
uploadErrors.push('Tipo de Archivo no Aceptado');
}else if (data.originalFiles[0]['size'] > 5000000) {
oWinArt.art.dialog({
title:'温馨提示',
icon:'warning',
lock:true,
drag:false,
content: '亲,您上传的为文件过大啦,请上传小于<span class="necessary bold"> 5M </span>的图片哦',
ok:true
});
uploadErrors.push('Tamaño de Archivo demasiado Grande');
}
if(uploadErrors.length == 0) {
data.submit();
}else{
return false;
}
},
done: function (e, data) {
var data = JSON.parse(data['result']);
if(data.src.length){
$('#logo_pic').val(data.src);
}else{
console.log('no');
}
}
});
php处理
public function uploads(){
if($this->request->isPost()){
$path = ROOT_PATH.'public'.$this->_uploads;
if(!file_exists($path)){
mkdir($path,0777,true);
}
$file_name = $this->request->post('file_name');
$file = $this->request->file($file_name);
// 移动到框架应用根目录/public/uploads/ 目录下
if($file){
$info = $file->move($path);
if($info){
$src = $this->_uploads.$info->getSaveName();
}else{
// 上传失败获取错误信息
$src = '';
$msg = $file->getError();
}
$result = array('src'=>$src);
return json_encode($result);
}else{
$this->redirect('Index/index');
}
}else{
echo '11';die;
$this->redirect('Index/index');
}
}
最近对seo优化比较感兴趣,做了个小程序,欢迎大家来踩 来光顾哦 www.iis7.com/b/plc/
查询百度权重排名工具 www.iis7.com/a/lm/gjcpmcx/
最后
以上就是无辜故事为你收集整理的【thinkphp5】thinkphp5+fileupload文件上传的全部内容,希望文章能够帮你解决【thinkphp5】thinkphp5+fileupload文件上传所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复