123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345 |
- <div id="tab-img" class="HuiTab">
- <div class="tabBar clearfix">
- <span>本地上传</span>
- <span>网络文件上传</span>
- <span>服务器图片选择</span>
- <input type="hidden" name="layer" id="layer" value="{$layer}">
- <input type="hidden" name="infoid" value={$infoid}>
- <input type="hidden" name="cjid" value={$cjid}>
- </div>
- <!-- 本地上传 -->
- <div class="tabCon">
- <div class="step1 active" style="margin-left:30px;">
- <form id="form-uploadimg" method="post" action="" enctype="multipart/form-data">
- <div class="row cl" style="margin-top:20px;">
- <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>图片要求: </label>
- <div class="formControls col-xs-8 col-sm-8">
- 格式 jpg,png,gif,jpeg,webp; 大小不超过4M.
- </div>
- <div class="col-3"> </div>
- </div>
- <div class="row cl" style="margin-top:20px;">
- <label class="form-label col-xs-2 col-sm-2">
- <span class="c-red">*</span>本地上传:</label>
- <div class="formControls col-xs-8 col-sm-8">
- <input type="file" class="input-text" name="upload_file" id="upload_file">
- </div>
- <div class="col-3"> </div>
- </div>
- <div class="row cl" style="margin-top:20px;">
- <input type="hidden" name="img_id" value={$img_id}>
- <input type="hidden" name="infoid" value={$infoid}>
- <input type="hidden" name="cjid" value={$cjid}>
- <div class="formControls col-sm-12">
- <div class="skin-minimal">
- <div class="check-box">
- <input type="checkbox" name="thumb" value="true" {$thumb ? 'checked' : "" }>
- <label for="thumb-1">缩略图</label>
- <input type="text" class="input-text" name="width" value={$width}
- style="width: 80px;">缩略图宽度
- <input type="text" class="input-text" name="height" value={$height}
- style="width: 80px;">缩略图高度
- <input type="checkbox" name="original" value="true" {$original ? 'checked' : "" } style="margin-left: 20px;">
- <label for="overwrite">保留原图</label>
- </div>
- </div>
- </div>
- </div>
- <div class="row cl" style="margin-top:30px;margin-left:30px;">
- <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2">
- <input class="btn btn-primary radius" type="button" value=" 确 定 "
- onCLick="uploadLocalImg();">
- <input class="btn btn-default radius" type="button" value=" 取 消 "
- onClick="layer_close();">
- </div>
- </div>
- </form>
- </div>
- <!-- 本地上传end -->
- </div>
- <!-- 网络图片 -->
- <div class="tabCon">
- <form id="form-uploadurlimg" method="post" action="" enctype="multipart/form-data">
- <div class="row cl" style="margin-top:20px;">
- <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>图片要求: </label>
- <div class="formControls col-xs-8 col-sm-8">
- 格式 jpg,png,gif,jpeg,webp; 大小不超过4M.
- </div>
- <div class="col-3"> </div>
- </div>
- <div class="row cl" style="margin-top:20px;">
- <label class="form-label col-xs-2 col-sm-2">
- <span class="c-red">*</span>图片地址:</label>
- <div class="formControls col-xs-8 col-sm-8">
- <input type="text" class="input-text" name="url_file" id="url_file">
- </div>
- <div class="col-3"> </div>
- </div>
- <div class="row cl" style="margin-top:20px;">
- <input type="hidden" name="img_id" value={$img_id}>
- <div class="formControls col-xs-12 col-sm-12">
- <div class="skin-minimal">
- <div class="check-box">
- <input type="checkbox" name="thumb" value="{$thumb}" {$thumb ? 'checked' : "" }>
- <label for="thumb-1">缩略图</label>
- <input type="text" class="input-text" name="width" value={$width} style="width: 80px;">缩略图宽度
- <input type="text" class="input-text" name="height" value={$height}
- style="width: 80px;">缩略图高度
- <input type="checkbox" name="original" value="{$original}" {$original ? 'checked' : "" } style="margin-left: 20px;">
- <label for="overwrite">保留原图</label>
- </div>
- </div>
- </div>
- </div>
- <div class="row cl" style="margin-top:30px;margin-left:30px;">
- <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2">
- <input class="btn btn-primary radius" type="button" value=" 确 定 "
- onCLick="uploadUrlImg()">
- <input class="btn btn-default radius" type="button" value=" 取 消 "
- onClick="layer_close();">
- </div>
- </div>
- </form>
- </div>
- <!-- 在线图片 -->
- <style>
- a.active-btn {
- color: #fff;
- background-color: #3bb4f2;
- border-color: #3bb4f2;
- }
- </style>
- <div class="tabCon">
- <a class="btn radius active-btn" id="database_picture"><i class="Hui-iconfont Hui-iconfont-jifen"></i>数据库模式</a>
- <a class="btn radius" id="directory_picture"><i class="Hui-iconfont Hui-iconfont-pages"></i> 目录模式</a>
- <div class="database online-picture">
- {include file="file_manager/database_picture" /}
- </div>
- <div class="directory online-picture" style="display: none;">
- {include file="file_manager/directory_picture" /}
- </div>
- <form id="form-uploadonlineimg" method="post" action="" enctype="multipart/form-data">
- <div class="row cl" style="margin-top:20px;">
- <label class="form-label col-xs-2 col-sm-2">
- <span class="c-red">*</span>图片地址:</label>
- <div class="formControls col-xs-8 col-sm-8">
- <input type="hidden" name="img_id" value={$img_id}>
- <input type="text" class="input-text" name="online_file" id="online_file">
- </div>
- <div class="col-3"> </div>
- </div>
- <div class="row cl" style="margin-top:30px;margin-left:30px;">
- <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2">
- <input class="btn btn-primary radius" type="button" value=" 确 定 "
- onCLick="uploadOnlineImg()">
- <input class="btn btn-default radius" type="button" value=" 取 消 "
- onClick="layer_close();">
- </div>
- </div>
- </form>
- </div>
- </div>
- <!--请在下方写此页面业务相关的脚本-->
- <script type="text/javascript">
- jQuery.Huitab = function (tabBar, tabCon, class_name, tabEvent, i) {
- var $tab_menu = $(tabBar);
- // 初始化操作
- $tab_menu.removeClass(class_name);
- $(tabBar).eq(i).addClass(class_name);
- $(tabCon).hide();
- $(tabCon).eq(i).show();
- $tab_menu.bind(tabEvent, function () {
- $tab_menu.removeClass(class_name);
- $(this).addClass(class_name);
- var index = $tab_menu.index(this);
- $(tabCon).hide();
- $(tabCon).eq(index).show()
- })
- }
- $(function () {
- $.Huitab("#tab-img .tabBar span", "#tab-img .tabCon", "current", "click", "0");
- $("#database_picture").click(function () {
- $(".online-picture").css('display', 'none');
- $(".database").css('display', 'block');
- $(this).addClass('active-btn');
- $('#directory_picture').removeClass('active-btn');
- });
- $("#directory_picture").click(function () {
- $(".online-picture").css('display', 'none');
- $(".directory").css('display', 'block');
- $(this).addClass('active-btn');
- $('#database_picture').removeClass('active-btn');
- });
- });
- // 本地上传图片
- function uploadLocalImg() {
- var layer = $("#layer").val();
- if ($("#upload_file").val() == '') {
- layer.msg("请选择要上传的文件", {
- icon: 6,
- time: 1000
- });
- return false;
- } else {
- var formData = new FormData($("#form-uploadimg")[0]);
- $.ajax({
- url: '{:url("file_manager/uploadLocalImg")}',
- type: 'POST',
- async: true,
- cache: false,
- data: formData,
- processData: false,
- contentType: false,
- dataType: "json",
- beforeSend: function () {
- // loadIndex = layer.load();
- },
- success: function (res) {
- if (res.code == 0) {
- // layer.close(loadIndex);
- if (layer == true) {
- var img = res.thumb ? res.thumb : res.picname;
- window.parent.$("#" + res.img_id).val(img);
- window.parent.$("#view-" + res.img_id).attr('src', img);
- layer_close();
- } else {
- layer.msg('上传成功', {
- icon: 1,
- time: 1000
- }, () => {
- window.location.reload();
- });
- }
- } else {
- // layer.close(loadIndex);
- layer.msg(res.msg, {
- icon: 5,
- time: 1000
- });
- return false;
- }
- }
- });
- }
- }
- // 网络图片
- function uploadUrlImg() {
- var layer = $("#layer").val();
- if ($("#url_file").val() == '') {
- layer.msg("文件地址不可以为空", {
- icon: 6,
- time: 1000
- });
- return false;
- } else {
- var formData = new FormData($("#form-uploadurlimg")[0]);
- $.ajax({
- url: '{:url("file_manager/uploadUrlImg")}',
- type: 'POST',
- async: true,
- cache: false,
- data: formData,
- processData: false,
- contentType: false,
- dataType: "json",
- beforeSend: function () {
- // loadIndex = layer.load();
- },
- success: function (res) {
- if (res.code == 0) {
- console.log(layer);
- // layer.close(loadIndex);
- if (layer == true) {
- var img = res.picname;
- window.parent.$("#" + res.img_id).val(img);
- if (res.thumbname) {
- img = res.thumbname;
- window.parent.$("#thumb").val(img);
- }
- window.parent.$("#view-" + res.img_id).attr('src', img);
- layer_close();
- } else {
- window.location.reload();
- }
- } else {
- // layer.close(loadIndex);
- layer.msg(res.msg, {
- icon: 5,
- time: 1000
- });
- return false;
- }
- }
- });
- }
- }
- function uploadOnlineImg() {
- var layer = $("#layer").val();
- if ($("#online_file").val() == '') {
- layer.msg("文件地址不可以为空", {
- icon: 6,
- time: 1000
- });
- return false;
- } else {
- var formData = new FormData($("#form-uploadonlineimg")[0]);
- $.ajax({
- url: '{:url("file_manager/uploadOnlineImg")}',
- type: 'POST',
- async: true,
- cache: false,
- data: formData,
- processData: false,
- contentType: false,
- dataType: "json",
- beforeSend: function () {
- // loadIndex = layer.load();
- },
- success: function (res) {
- // layer.close(loadIndex);
- if (res.code == 0) {
- if (layer == true) {
- var img = res.picname;
- window.parent.$("#" + res.img_id).val(img);
- if (res.thumbname) {
- img = res.thumbname;
- window.parent.$("#thumb").val(img);
- }
- window.parent.$("#view-" + res.img_id).attr('src', img);
- layer_close();
- } else {
- layer.msg('上传成功', {
- icon: 1,
- time: 1000
- }, () => {
- window.location.reload();
- });
- }
- } else {
- layer.msg(res.msg, {
- icon: 5,
- time: 1000
- });
- return false;
- }
- }
- });
- }
- }
- </script>
- <!--请在上方写此页面业务相关的脚本-->
|