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');
		}
	}

文章来源: 【thinkphp5】thinkphp5+fileupload文件上传

人吐槽

人点赞

发表评论