Upload 上传

原生上传

原始的file控件显示效果比较差,而且不同浏览器显示结果不同,本框架借助CSS做了基本美化处理。基本做到了在chrome,Firefox,Opera,safafi浏览器中风格统一,但是在IE11和Edge中依然显示丑陋。以下演示三种状态,即常规,禁止(disabled)和只读(readonly)

选择文件:
禁止使用:
只读文件:
                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择文件:</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <input type="file">
                                            </div>
                                        </div>
                                        <a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/examples/images/head01.jpg),url(https://src.axui.cn/src/images/loading.gif);"></a>
                                    </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">禁止使用:</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <input type="file" disabled>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">只读文件:</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <input type="file" readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        

强化美化 JS

即使做了简单的美化处理,但是显示效果差强人意,而且不同浏览器显示结果依然不同,可控性比较差,故使用js设计了本文件上传控件,美观实用。文件域用ax-file类包裹;data-placeholder属性值等于输入提示文字,可为空;data-text等于按钮文字,可为空。右侧显示图片可配合ax-form-headax-form-img使用。

选择文件:
                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择文件:</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件">
                                                    <input type="file">
                                                </div>
                                            </div>
                                        </div>
                                        <a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/examples/images/head01.jpg),url(https://src.axui.cn/src/images/loading.gif);"></a>
                                    </div>
                                </div>
                        

保留了之前纯JS美化文件域的代码,但注意已经调整了样式类,实际效果可能不好,用户自行斟酌使用。

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">名称</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <input onmouseout="document.getElementById('file-upload').style.display='none';" id="file-view" type="text">
                                                <span onmouseover="document.getElementById('file-upload').style.display='block';" class="ax-file-btn">选择</span>
                                                <input onchange="document.getElementById('file-view').value=this.value;" id="file-upload" class="ax-input-file" type="file">
                                            </div>
                                        </div>
                                        <a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/examples/images/head01.jpg),url(https://src.axui.cn/src/images/loading.gif);"></a>
                                    </div>
                                </div>
                        

尺寸

同其他input和teatarea一样有4个尺寸可用,分别是ax-xs(高22px),ax-sm(高28px),ax-md(默认高38px),ax-lg(高48px)。

选择文件(xs):
选择文件(sm):
选择文件(md):
选择文件(lg):
                                <input type="file" class="ax-xs">
                                <div class="ax-break"></div>
                                <input type="file" class="ax-sm">
                                <div class="ax-break"></div>
                                <input type="file" >
                                <div class="ax-break"></div>
                                <input type="file" class="ax-lg">
                                <div class="ax-break"></div>

                                <div class="ax-form-group ax-xs">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择文件(xs):</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件">
                                                    <input type="file" class="ax-xs">
                                                </div>
                                            </div>
                                        </div>
                                        <a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/examples/images/head01.jpg),url(https://src.axui.cn/src/images/loading.gif);"></a>
                                    </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group ax-sm">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择文件(sm):</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件">
                                                    <input type="file" class="ax-sm">
                                                </div>
                                            </div>
                                        </div>
                                        <a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/examples/images/head01.jpg),url(https://src.axui.cn/src/images/loading.gif);"></a>
                                    </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择文件(md):</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件">
                                                    <input type="file">
                                                </div>
                                            </div>
                                        </div>
                                        <a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/examples/images/head01.jpg),url(https://src.axui.cn/src/images/loading.gif);"></a>
                                    </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group ax-lg">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择文件(lg):</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件">
                                                    <input type="file" class="ax-lg">
                                                </div>
                                            </div>
                                        </div>
                                        <a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/examples/images/head01.jpg),url(https://src.axui.cn/src/images/loading.gif);"></a>
                                    </div>
                                </div>
                        

DropZonejs 批量拖拽上传 PLUGIN

DropZonejs是Github社区受欢迎的拖拽上传插件,不依赖第三方库,为了统一样式定义本框架在v5.7.0版本基础上进行了修改,使之更方便使用,更符合中国开发者习惯。官网地址请点击这里,Github地址请点击这里

本框架版本的Dropzonejs模板制作说明:

  • data-fancybox 表示创建缩略图链接
  • data-thumbnail 表示创建缩略图图片
  • data-image 表示创建缩略图背景
  • data-progress 表示创建缩略图反向加载
  • data-percent 表示创建缩略图正向加载(取整)
  • data-errormessage 表示错误信息内容
  • data-size 表示图片大小,单位MB
  • data-name 表示文件名

可以自由制作模板,模板举例如下:

<div id="template01" style="display: none;">
    <li  class="ax-grid-block ax-col-6">
        <div class="ax-item">
            <div class="ax-operate"><a href="###" data-fancybox="upload" target="_blank"><i class="ax-iconfont ax-icon-eye"></i></a></div>
            <div class="ax-preview">
                <div class="ax-image" data-image="">
                    <div class="ax-progress" data-progress=""></div>
                    <div class="ax-percent" data-percent=""></div>
                    <div class="ax-success-mark"><i class="ax-iconfont ax-icon-check"></i></div>
                    <div class="ax-error-mark"><i class="ax-iconfont ax-icon-close"></i></div>
                    <div class="ax-error-message" data-errormessage=""></div>
                </div>
                <div class="ax-details">
                    <div class="ax-size" data-size=""></div>
                    <div class="ax-filename" data-name=""></div>
                </div>
            </div>
        </div>
    </li>
</div>
                        
    •     <script src="https://src.axui.cn/src/plugins/dropzone/js/dropzone.js" type="text/javascript"></script>
          <script type='text/javascript'>
          var myDropzone = new Dropzone("#upload01", {
                  url: "ax-upload-script.php",
                  previewTemplate: $('#template01').html(),
                  paramName: "file",
                  maxFilesize: 5,
                  maxFiles: 5,
                  addRemoveLinks:true,
                  acceptedFiles: ".jpg,.png,.gif,.txt,.doc,.docx,.xsl,.xslx,.pdf",
           });
          $(document).ready(function () {
          /* 如果引用了jquery可使用以下方法:
             $("#upload01").dropzone({
                  url: "ax-upload-script.php",
                  previewTemplate: $('#template01').html(),
                  paramName: "file",
                  maxFilesize: 5,
                  maxFiles: 5,
                  addRemoveLinks:true,
                  acceptedFiles: ".jpg,.png,.gif,.txt,.doc,.docx,.xsl,.xslx,.pdf",
              }); */
          });
          </script>
                              
    • <div class="ax-dropzone-outer">
          <div class="ax-grid ax-space-md">
              <ul class="ax-grid-inner ax-dropzone" id="upload01"></ul>
          </div>
      </div>
      
      <div id="template01" style="display: none;">
          <li  class="ax-grid-block ax-col-6">
              <div class="ax-item">
                  <div class="ax-operate"><a href="###" data-fancybox="upload" target="_blank"><i class="ax-iconfont ax-icon-eye"></i></a></div>
                  <div class="ax-preview">
                      <div class="ax-image" data-image="">
                          <div class="ax-progress" data-progress=""></div>
                          <div class="ax-percent" data-percent=""></div>
                          <div class="ax-success-mark"><i class="ax-iconfont ax-icon-check"></i></div>
                          <div class="ax-error-mark"><i class="ax-iconfont ax-icon-close"></i></div>
                          <div class="ax-error-message" data-errormessage=""></div>
                      </div>
                      <div class="ax-details">
                          <div class="ax-size" data-size=""></div>
                          <div class="ax-filename" data-name=""></div>
                      </div>
                  </div>
              </div>
          </li>
      </div>
                                          
    • $path = "upload/"; //上传目录
      
      $extArr = array("jpg", "png", "gif", "txt", "doc","docx","pdf","xsl","xslx");
      
      if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
          $name = $_FILES['file']['name'];
          $size = $_FILES['file']['size'];
      
          if(empty($name)){
              echo '请选择要上传的图片';
              exit;
          }
          $ext = extend($name);
          if(!in_array($ext,$extArr)){
              echo '图片格式错误!';
              exit;
          }
          if($size>(100*1024)){
              echo '图片大小不能超过100KB';
              exit;
          }
          $image_name = time().rand(100,999).".".$ext;
          $tmp = $_FILES['file']['tmp_name'];
          if(move_uploaded_file($tmp, $path.$image_name)){
              echo 'ok';
          }else{
              echo '上传出错了!';
          }
          exit;
      }
      
      //获取文件类型后缀
      function extend($file_name){
          $extend = pathinfo($file_name);
          $extend = strtolower($extend["extension"]);
          return $extend;
      }