js文件
<script src="/static/zln/js/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
css样式：
<style>
.btn {
width: 196px;
height: 34px;
background: #FFFFFF;
border: 1px solid #5EB9F9;
}
.btn:hover {
background: #5EB9F9;
color: #FFFFFF;
}
.filter_input {
border: none;
width: 268px;
text-align: center;
}
.filewt {
width: 268px;
background: #FFFFFF;
border-radius: 5px;
border: 1px solid #5EB9F9;
line-height: 30px;
}
.btn {
cursor: pointer;
color: #5EB9F9;
}
.btnconfirm {
width: 60px;
height: 30px;
border: solid 1px #5EB9F9;
margin-right: 10px;
text-align: center;
line-height: 30px;
border-radius: 3px;
color: #5EB9F9;
;
}
.btncancel {
cursor: pointer;
width: 60px;
border: solid 1px #5EB9F9;
text-align: center;
height: 30px;
line-height: 30px;
border-radius: 3px;
color: #5EB9F9;
;
}
.btnse {
cursor: pointer;
margin-top: 50px;
display: flex;
justify-content: center;
}
.btnse div:hover {
background: #5EB9F9;
color: #FFFFFF;
}
.filewt {
margin-bottom: 30px;
}
.col-xs-1 {
margin-left: 36px;
}
.row {
margin-top: 50px;
}
</style>
HTML:
<div class="row row_space">
<div class="filewt">
<input readonly="readonly" type="text" οnclick="Browser()" accept=".doc,.docx,.pdf,.word" id="_file_path" class="filter_input form-control">
</div>
<div style="padding-left:0px">
<div class="col-xs-4">
<input style="display:none" type="file" οnchange="importExcel(this)" accept=".doc,.docx,.pdf,.word" id="file_path" class="filter_input form-control" />
</div>
<div class="col-xs-1">
<button id="batch_btn_compile" οnclick="Browser()" class="btn btn-primary" accept=".doc,.docx,.pdf,.word">点击上传简历</button>
</div>
</div>
</div>
<script type="text/javascript">
function Browser() {
$('#file_path').click();
}
function importExcel(obj) {
$('#_file_path').val(obj.files[0].name);
}
$("#file_path").change(function() {
var file = $('#_file_path').val();
if (file == "") {
alert("请选择要上传的文件");
} else {
//检验文件类型是否正确
var exec = (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
// if (exec != "pdf") {
// alert("文件格式不对，请上传Excel文件!");
// return false;
// } else {
var fileArray = this.files[0];
var formData = new FormData();
/*给对象中添加文件信息，没有对象或者没有文件信息后台是得不到的*/
formData.append('file', fileArray);
$.ajax({
url:"{:url('MyUpload/upload')}",//请求地址
type: 'POST', /*传递方法 */
data:formData, /*要带的值，在这里只能带一个formdata ，不可以增加其他*/
//传递的数据
dataType : 'json', //传递数据的格式
async:false, //这是重要的一步，防止重复提交的
cache: false, //设置为false，上传文件不需要缓存。
contentType: false,//设置为false,因为是构造的FormData对象,所以这里设置为false。
processData: false,//设置为false,因为data值是FormData对象，不需要对数据做处理。
success: function (data){
console.log(data);
if(data.code != 0){
alert('上传成功');
$('#tables_2').val(data.data);
}else{
alert('上传失败');
}
},
error: function () {
alert("上传错误！");
}
});
}
return true;
});
</script>
PHP:
public function upload(){
$access_admin = Cookie::get();//获取登录信息
if(request()->isPost()){
// 获取表单上传文件
$file = request()->file('file');
$fileName = $file->getOriginalName();//上传文件名
// 使用验证器验证上传的文件
validate(['file' => [
// 限制文件大小(单位b)，这里限制为4M
'fileSize' => 4 * 1024 * 1024,
]])->check(['file' => $file]);
// 上传到本地服务器
$savename = \think\facade\Filesystem::disk('public')->putFile('images', $file);
if($savename){
// 拼接路径
$path=\think\Facade\Filesystem::getDiskConfig('public', 'url').str_replace('\\', '/', $savename);
$data['filepic']='http://'.$_SERVER['SERVER_NAME'].'/attachment/'.$path;
$data['uid']=$access_admin['user_id'];
$data['title']=$fileName;
$data['createtime']=time();
$ifres=Db::name('resume_file')->where('uid',$access_admin['user_id'])->find();
if (empty($ifres)){
ResumeFileModel::create($data);
}else{
ResumeFileModel::where('uid',$access_admin['user_id'])->update($data);
}
exit(json_encode(array(
'code' => 200,
'msg' => "上传成功"
)));
}
}
}