這里在這個項目新加一個商家申請的功能，其他地方也可以用得到，難度不大，主要在于圖片上傳和預覽圖片這里。
先上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最新的生成函數，精確率高，萬條并發也不會有重復的可能。
