本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • VIP会员
  • html5拖拽排序多图片上传插件
    时间:2019-12-01 12:34 来源:开源之家 作者:开源之家测试提供 下载:152 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:50.5 KB
    • 运行环境:HTML
    • 下载次数:152 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    特效描述:html5 拖拽排序 多图片上传插件,html5实现多图多文件上传与拖拽上传,拖拽排序功能。支持上传图片替换、图片删除、预览等功能。

    代码结构

    1. 引入CSS

    1
    <link rel="stylesheet" href="upload.css">

    2. 引入JS

    1
    2
    <script src="jquery.min.js"></script>
    <script src="jQuery.upload.min.js"></script>

    3. HTML代码

     <h1>upload h5图片文件上传插件</h1>
        <p>
            实现多图多文件上传与拖拽上传,拖拽排序功能。<br />
            该插件是自己在项目中使用的,由于自己项目组的习惯,所有参数都写在标签上的。
        </p>
    <h2>案例一:默认无参数</h2>
    <div class="case">
         <div class="upload" action='upload.html' id='case1'></div>
    </div>
    <h2>案例二:单个图片上传</h2>
    <div class="case">
         <div class="upload" action='upload.html' data-num='1' id='case2'></div>
    </div>
    <h2>案例三:查看图片信息</h2>
    <div class="case">
         <div class="upload" action='upload.html' data-value='1.png' id='case3'></div>
    </div>
    <h2>引用文件:</h2>
        <pre>
    &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="jQuery.upload.mini.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="upload.css"&gt;
        </pre>
        <h2>调用代码:</h2>
        <pre>
    &lt;div class="upload" id="case" data-num="10" data-type="zip,pdf,doc,docx"&gt;&lt;/div&gt;
    &lt;script type="text/javascript"&gt;
        $(function(){
            $("#case").upload(
                //该函数为点击放大镜的回调函数,如没有该函数,则不显示放大镜
                function(_this,data){
                    console.log(data) 
                }
            );
        })
    &lt;/script&gt;</pre>
    <h2>参数配置:</h2> 
        <table border='1'  cellspacing="0" bordercolor="#d7d7d7" style="border-collapse:collapse;">
            <tr>
                <td width='120'>标签</td>
                <td width="300">默认值</td>
                <td>说明</td>
            </tr>
            <tr>
                <td>data-height</td>
                <td>0</td>
                <td>图片上传压缩最大高度,0则根据宽度等比例压缩</td>
            </tr>
            <tr>
                <td>data-width</td>
                <td>1920</td>
                <td>图片上传压缩最大宽度,0则根据高度等比例压缩</td>
            </tr>
            <tr>
                <td>data-type</td>
                <td>png,jpg,jpeg,gif</td>
                <td>允许上传文件的扩展名,多个扩展名用逗号分割,支持非图片格式的文件上传</td>
            </tr>
            <tr>
                <td>data-file</td>
                <td>file</td>
                <td>上传提交服务器的表单名</td>
            </tr>
            <tr>
                <td>data-name</td>
                <td>uoload</td>
                <td>最终表单提交图片路径的表单名</td>
            </tr>
            <tr>
                <td>action</td>
                <td>/upload.php</td>
                <td>服务器接收上传文件的地址,服务器需返回{"code":1,"msg":"/upload/1.jpg"}的JSON字符串,code为上传状态,1为成功,0为失败,msg为成功的文件路径或失败原因提示!</td>
            </tr>
            <tr>
                <td>data-num</td>
                <td>10</td>
                <td>最多可以上传多少个文件,如为1,上传插件为单个文件上传样式</td>
            </tr>
            <tr>
                <td>data-size</td>
                <td>20480</td>
                <td>文件上传单个文件最大容量,图片不传不受该属性限制</td>
            </tr>
            <tr>
                <td>data-value</td>
                <td>null</td>
                <td>已经上传成功的文件名,多个文件用英文逗号分割</td>
            </tr>
        </table>

    html5拖拽排序多图片上传插件

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信