这里在这个项目新加一个商家申请的功能，其他地方也可以用得到，难度不大，主要在于图片上传和预览图片这里。
先上html代码：
~~~
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>商家申请</title>
<link rel="stylesheet" type="text/css" href="__INDEXSS__/css/loaders.min.css"/>
<link rel="stylesheet" type="text/css" href="__INDEXSS__/css/loading.css"/>
<link rel="stylesheet" type="text/css" href="__INDEXSS__/css/base.css"/>
<link rel="stylesheet" type="text/css" href="__INDEXSS__/css/style.css"/>
<link rel="stylesheet" type="text/css" href="__INDEXSS__/css/worker_apply.css"/>
</head>
<style>
.add_div {
width: 100%;
height: auto;
border: solid #ccc 1px;
margin-top: 0.5rem;
/*margin:1% 1% 0 1%;
padding: 20px;*/
}
.file-listb {
height: 125px;
display: none;
list-style-type: none;
}
.file-listb img {
max-width: 70px;
vertical-align: middle;
}
.file-listb .file-itemb {
margin-bottom: 10px;
float: left;
margin-left: 20px;
}
.file-listb .file-itemb .file-delb {
display: block;
margin-left: 20px;
margin-top: 5px;
cursor: pointer;
}
</style>
<body>
<header class="top-header">
<a class="text texta" href="javascript:history.go(-1)">返回</a>
<h3>商家申请</h3>
</header>
<input type="hidden" value="<?php echo session('ids');?>" id="username_id">
<div class="add_div" id="workerdiv">
<table class="worker-table">
<tr>
<td>
您的真实姓名：<input type="text" placeholder="请输入您的真实姓名" id="name"/>
</td>
</tr><tr>
<td>
您是:
<select id="iv_level">
<option value="1">个人</option>
<option value="2">个体户</option>
<option value="3">企业</option>
</select>点击商家类型
</td>
</tr><tr>
<td>
您的电商经验：<input type="text" placeholder="请输入数字" id="working_life"/>年
</td>
</tr><tr>
<td>
您的联系电话：<input type="text" placeholder="请输入11位手机号码" id="phone"/>
</td>
</tr><tr>
<td>
您的微信号 ：<input type="text" placeholder="请提供您的微信号" id="wechat"/>
</td>
</tr><tr>
<td>
<p>
<span>个人身份证件图片：</span>
<input type="file" name="" id="choose-fileb" multiple="multiple" accpet = "image/*" capture = "camera"/>
</p>
</td>
</tr><tr>
<td>
<p>
<ul class="file-listb ">
</ul>
</p>
</td>
</tr><tr>
<td>
<div style="font-size: 1.2rem; display: inline-block; padding: 0 1em; margin-bottom: 2em;" class="cheK"><input
type="checkbox" id="checkAgree" checked>我承诺信息真实有效,如有虚假愿意承担相关后果</div>
</td>
</tr>
</table>
<button class="worker-button" href="javascript:;" id="upload">立即申请</button>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script>
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return "";
}
//获取到的cookieid
// var user_id=getCookie('ids');
var user_id = $('#username_id').val();
window.onload = function()
{
var formData = new FormData();
formData.append('user_id', user_id);
$.ajax({
url: 'http://localhost/tp54/public/index.php/index/worker/applyon',
type: 'post',
data: formData,
dataType: 'json',
processData: false,
contentType: false,
success: function (data) {
if(data == 'kdfsj54sdf'){
layer.alert('您已经提交过申请了，请耐心等待平台审核！');
$("#workerdiv").hide();
}else{
$("#workerdiv").show();
}
}
});
}
$(function () {
////////////////////////////////////////////////图片上传//////////////////////////////////////////////
//声明变量
var $buttonb = $('#upload'),
//选择文件按钮
$fileb = $("#choose-fileb"),
//回显的列表
$listb = $('.file-listb'),
//选择要上传的所有文件
fileListb = [];
//当前选择上传的文件
var curFileb;
// 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
// 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.
$fileb.on('change', function (e) {
//上传过图片后再次上传时限值数量
var numoldb = $('li').length;
if(numoldb >= 9){
layer.alert('最多上传9张图片');
return;
}
//限制单次批量上传的数量
var numb = e.target.files.length;
var numallb = numoldb + numb;
if(numb >9 ){
layer.alert('最多上传9张图片');
return;
}else if(numallb > 9){
layer.alert('最多上传9张图片');
return;
}
//原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
curFileb = this.files;
//curFileb = $file.get(0).files;
//console.log(curFileb);
//将fileListb对象变成数组
fileListb = fileListb.concat(Array.from(curFileb));
//console.log(fileListb);
for (var i = 0, len = curFileb.length; i < len; i++) {
reviewFileb(curFileb[i])
}
$('.file-listb').fadeIn(2500);
})
function reviewFileb(file) {
//实例化fileReader,
var fdb = new FileReader();
//获取当前选择文件的类型
var fileTypeb = file.type;
//调它的readAsDataURL并把原生File对象传给它，
fdb.readAsDataURL(file);//base64
//监听它的onload事件，load完读取的结果就在它的result属性里了
fdb.onload = function () {
if (/^image\/[jpeg|png|jpg|gif]/.test(fileTypeb)) {
$listb.append('<li style="border:solid red px; margin:5px 5px;" class="file-itemb" id="testes"><img src="' + this.result + '" alt="" height="70"><span class="file-delb">删除</span></li>').children(':last').hide().fadeIn(2500);
} else {
$listb.append('<li class="file-itemb"><span class="file-name">' + file.name + '</span><span class="file-delb">删除</span></li>')
}
}
}
//点击删除按钮事件：
$(".file-listb").on('click', '.file-delb', function () {
let $parentb = $(this).parent();
console.log($parentb);
let indexb = $parentb.index();
fileListb.splice(indexb, 1);
$parentb.fadeOut(850, function () {
$parentb.remove()
});
//$parentb.remove()
});
//点击上传按钮事件：
$buttonb.on('click', function () {
var name = $('#name').val();
var ivleve = $("#iv_level option:selected").val();
var working = $('#working_life').val();
var phone = $('#phone').val();
var wechat = $('#wechat').val();
// var catgory = $('#catgory').val();
// var price = $('#price').val();
// var desc = $('#desc').val();
if (name == '' || working == '' || phone == '' || wechat == '') {
layer.alert('您还有选项未填写！');
return;
}
// else if (status == null) {
// layer.alert('请输入商品显示状态');
// return;
// }
if(fileListb.length > 6){
layer.alert('最多允许上传6张图片');
return;
} else {
var formData = new FormData();
for (var i = 0, len = fileListb.length; i < len; i++) {
//console.log(fileListb[i]);
formData.append('upfile[]', fileListb[i]);
}
formData.append('user_id', user_id);
formData.append('name', name);
formData.append('ivleve', ivleve);
formData.append('working', working);
formData.append('phone', phone);
formData.append('wechat', wechat);
// alert(123);
$.ajax({
url: 'http://localhost/tp54/public/index.php/index/worker/user_apply',
type: 'post',
data: formData,
dataType: 'json',
processData: false,
contentType: false,
success: function (data) {
if(data == 'fsklajfkjs54f'){
layer.alert('申请成功');
history.back();
}else{
layer.alert('申请失败，请联系客服!');
}
}
})
}
});
})
</script>
</body>
</html>
~~~
关于这个用户id然后传回给服务端问题，本来我是用cookie的，但是有时候退出的时候不一定能清除掉，导致id准确性不高，所以用来session来获取到用户的id。再传回给服务端验证。
接下来粘贴php代码：
~~~
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2017/8/9
* Time: 22:42
*/
namespace app\index\controller;
use think\Controller;
use think\Db;
use think\Request;
use think\View;
class Worker extends Controller{
public function worker_lista(){
return $this->fetch('worker_lista');
}
public function worker_apply()
{
if (!session('susername') || !session('spassword')) {
return $this->error('未登录', url('index/login/index'));
} else {
// $view = new View();
return view('worker_apply');
// return $this->fetch('worker_apply');
}
}
public function user_apply(){
$info = Db::name('workerapply');
//接收传过来的图片信息
$upfile = $_FILES['upfile'];
for($i=0;$i<count($upfile['name']);$i++){
// 查询是否有此文件夹，没有则创建
$dir = "worker/";
if (!is_dir($dir)) {
mkdir($dir);
}
$str = stristr($upfile['name'][$i], '.'); // stristr()函数获取上传文件的后缀
// strtotime()函数定义一个Unix时间戳
// $path = "image/" . uniqid(prefix, false) . $str;
// 定义上传文件的存储位置
$path = "worker/";
//生成唯一id文件名
$filename = session_create_id() . $str;
// 移动文件
if (move_uploaded_file($upfile['tmp_name'][$i], $path.$filename)) {
// $strs = substr($path,6);
$imastr = $path . $filename;
$tests[$i] = array($imastr);
$tes = '上传成功';
}else{
$tes = '上传失败';
$tesst[$i] = '';
}
}
//图片文件名经过json转化存储到数据库中
$img = json_encode($tests);
$user_id = $_POST['user_id'];
$name = $_POST['name'];
$ivleve = $_POST['ivleve'];
$working = $_POST['working'];
$phone = $_POST['phone'];
$wechat = $_POST['wechat'];
//保存到数据库
$sql = $info->insert(['user_id' => $user_id,'name' => $name,'iv_level' => $ivleve,'working_life' => $working,'phone' => $phone,'wechat' => $wechat,'img' => $img]);
echo json_encode('fsklajfkjs54f');
// return $this->redirect(url('index/index/gerenzx'));
}
public function applyon(){
$info = Db::name('workerapply');
$user_id = $_POST['user_id'];
$apply = $info->where('user_id', $user_id)->find();
if(!empty($apply)){
$a = 'kdfsj54sdf';
}else{
$a = 'jaklf44saf';
}
echo json_encode($a);
}
}
~~~
生成id文件名那里我用的是php7最新的生成函数，精确率高，万条并发也不会有重复的可能。
