mirror of
https://gitee.com/zoujingli/ThinkAdmin.git
synced 2025-04-06 03:58:04 +08:00
[更新]修改文件上传案例
This commit is contained in:
Anyon
parent
1803fdae47
commit
99ee099e8a
@ -3,59 +3,53 @@
|
|||||||
{block name="content"}
|
{block name="content"}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.uploadbutton {
|
.uploadbutton {line-height: 50px;display: inline-block;position: absolute;margin-left: 10px;top: 20px;}
|
||||||
line-height: 50px;
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
margin-left: 10px;
|
|
||||||
top: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="code">
|
<div class="code">
|
||||||
<blockquote class="site-text layui-elem-quote">
|
<blockquote class="site-text layui-elem-quote">
|
||||||
单图片上传
|
单图片上传
|
||||||
|
<hr />
|
||||||
|
<p style='font-size:12px;line-height:26px'>
|
||||||
|
1. data-file 指定上传文件模式，可选择 ( one | mut )，one : 表示单文件上传, mut : 表示多文件上传。
|
||||||
|
</p>
|
||||||
|
<p style='font-size:12px;line-height:26px'>
|
||||||
|
2. data-type 指定上传文件后缀，多种后缀时使用英文逗号分割，如：jpg,png。
|
||||||
|
</p>
|
||||||
|
<p style='font-size:12px;line-height:26px'>
|
||||||
|
3. data-uptype 指定上传文件存储方式，可选择( local | qiniu | oss )。local : 文件存储在本地服务器, qiniu : 文件存储在七牛云, oss : 文件存储在阿里云 OSS。
|
||||||
|
</p>
|
||||||
|
<p style='font-size:12px;line-height:26px'>
|
||||||
|
4. data-field 绑定上传成功后返回URL地址的 input，同时会触发 input 的 change 事件，可以监听并进行处理。
|
||||||
|
</p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<div style="position:relative">
|
<div style="position:relative">
|
||||||
<div class="uploadimage">
|
<div class="uploadimage"><input type="hidden" name="file_1"/></div>
|
||||||
<input type="hidden" name="file_1"/>
|
<a data-file="one" data-field="file_1" data-type="png,jpg" data-uptype="local" href="javascript:void(0)" class="uploadbutton">上传图片</a>
|
||||||
</div>
|
|
||||||
<a data-file="one"
|
|
||||||
data-field="file_1"
|
|
||||||
data-type="png,jpg"
|
|
||||||
data-uptype="local"
|
|
||||||
href="javascript:void(0)"
|
|
||||||
class="uploadbutton">上传图片</a>
|
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
require(['jquery'], function () {
|
require(['jquery'], function () {
|
||||||
$('[name="file_1"]').on('change', function () {
|
$('[name="file_1"]').on('change', function () {
|
||||||
$(this).parent().css('backgroundImage', 'url(' + this.value + ')');
|
$(this).parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + this.value + ')');
|
||||||
$(this).parent().attr('data-tips-image', this.value);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<pre class="layui-code" lay-title="HTML代码">
|
<pre class="layui-code" lay-title="HTML代码">
|
||||||
|
|
||||||
<div style="position:relative">
|
<div style="position:relative">
|
||||||
<div class="uploadimage">
|
<div class="uploadimage"><input type="hidden" name="file_1"/></div>
|
||||||
<input type="hidden" name="file_1"/>
|
<a data-file="one" data-field="file_1" data-type="png,jpg" data-uptype="local" href="javascript:void(0)" class="uploadbutton">上传图片</a>
|
||||||
</div>
|
|
||||||
<a data-file="one"
|
|
||||||
data-field="file_1"
|
|
||||||
data-type="png,jpg"
|
|
||||||
data-uptype="local"
|
|
||||||
href="javascript:void(0)">上传图片</a>
|
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre class="layui-code" lay-title="javascript代码">
|
<pre class="layui-code" lay-title="javascript代码">
|
||||||
|
|
||||||
// 监听 input 的 onchange 事件
|
// 监听 input 的 onchange 事件
|
||||||
// 当有图片上传时，会触发 change 事件
|
// 当有文件上传时，会触发 change 事件
|
||||||
require(['jquery'], function () {
|
require(['jquery'], function () {
|
||||||
$('[name="file_1"]').on('change', function () {
|
$('[name="file_1"]').on('change', function () {
|
||||||
$(this).parent().css('backgroundImage', 'url(' + this.value + ')');
|
$(this).parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + this.value + ')');
|
||||||
$(this).parent().attr('data-tips-image', this.value);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</pre>
|
</pre>
|
||||||
@ -64,51 +58,60 @@ require(['jquery'], function () {
|
|||||||
<div class="code">
|
<div class="code">
|
||||||
<blockquote class="site-text layui-elem-quote">
|
<blockquote class="site-text layui-elem-quote">
|
||||||
单文件上传
|
单文件上传
|
||||||
|
<hr />
|
||||||
|
<p style='font-size:12px;line-height:26px'>
|
||||||
|
1. data-file 指定上传文件模式，可选择 ( one | mut )，one : 表示单文件上传, mut : 表示多文件上传。
|
||||||
|
</p>
|
||||||
|
<p style='font-size:12px;line-height:26px'>
|
||||||
|
2. data-type 指定上传文件后缀，多种后缀时使用英文逗号分割，如：zip,rar。
|
||||||
|
</p>
|
||||||
|
<p style='font-size:12px;line-height:26px'>
|
||||||
|
3. data-uptype 指定上传文件存储方式，可选择( local | qiniu | oss )。local : 文件存储在本地服务器, qiniu : 文件存储在七牛云, oss : 文件存储在阿里云 OSS。
|
||||||
|
</p>
|
||||||
|
<p style='font-size:12px;line-height:26px'>
|
||||||
|
4. data-field 绑定上传成功后返回URL地址的 input，同时会触发 input 的 change 事件，可以监听并进行处理。
|
||||||
|
</p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<div style="position:relative">
|
<div style="position:relative;width:500px">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input type="text" class="form-control" name="file_2" placeholder="请选择文件...">
|
<input type="text" class="form-control" name="file_2" placeholder="请选择ZIP文件...">
|
||||||
<a class="input-group-addon"
|
<a class="input-group-addon" data-file="one" data-type="zip" data-uptype="local" data-field="file_2">
|
||||||
data-file="one"
|
|
||||||
data-type="zip"
|
|
||||||
data-uptype="local"
|
|
||||||
data-field="file_2">
|
|
||||||
<i class="fa fa-file"></i>
|
<i class="fa fa-file"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
require(['jquery'], function () {
|
require(['jquery'], function () {
|
||||||
$('[name="file_1"]').on('change', function () {
|
$('[name="file_2"]').on('change', function () {
|
||||||
$(this).parent().css('backgroundImage', 'url(' + this.value + ')');
|
alert('文件上传后的地址：' + this.value);
|
||||||
$(this).parent().attr('data-tips-image', this.value);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<pre class="layui-code" lay-title="HTML代码">
|
<pre class="layui-code" lay-title="HTML代码">
|
||||||
|
|
||||||
<div style="position:relative">
|
<div style="position:relative;width:500px">
|
||||||
<div class="uploadimage">
|
<div class="input-group">
|
||||||
<input type="hidden" name="file_1"/>
|
<input type="text" class="form-control" name="file_2" placeholder="请选择ZIP文件...">
|
||||||
|
<a class="input-group-addon" data-file="one" data-type="zip" data-uptype="local" data-field="file_2">
|
||||||
|
<i class="fa fa-file"></i>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<a data-file="one"
|
</div>
|
||||||
data-field="file_1"
|
|
||||||
data-type="png,jpg"
|
|
||||||
data-uptype="local"
|
|
||||||
href="javascript:void(0)">上传图片</a>
|
|
||||||
</div>
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre class="layui-code" lay-title="javascript代码">
|
<pre class="layui-code" lay-title="javascript代码">
|
||||||
|
|
||||||
// 监听 input 的 onchange 事件
|
// 监听 input 的 onchange 事件
|
||||||
// 当有图片上传时，会触发 change 事件
|
// 当有文件上传时，会触发 change 事件
|
||||||
require(['jquery'], function () {
|
require(['jquery'], function () {
|
||||||
$('[name="file_1"]').on('change', function () {
|
$('[name="file_2"]').on('change', function () {
|
||||||
$(this).parent().css('backgroundImage', 'url(' + this.value + ')');
|
alert('文件上传后的地址：' + this.value);
|
||||||
$(this).parent().attr('data-tips-image', this.value);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user