将来的你, 肯定会感激现在拼命的自己。
  • jquery
  •  2015.04.09 09:38
  •  753

jquery插件ajaxFileUpload实现异步上传文件案例

  最近在做一个开放平台,本来我只是个做后端开发的码农,部门负责人说前端简单不需要前端了,就这样前端也让我包了,真是苦逼啊!

  言归正传,开发过程中由于涉及到图片的上传,刚开始考虑用uploadify插件的,但考虑需要安装flash插件,还有就是上传的图片个数比较多,后面纠结了挺久还是决定研究下ajaxFileUpload的使用,下面我就直接贴我写的一部分代码吧。

  js代码(其中引用了ArtDialog6插件作为提示):

$(function(){
  $( '.js-upload' ).click( function () {
      var that = $( this ), type = that.data( 'type' ), maxsize = that.data( 'maxsize' ), hidden = that.data( 'hidden' ), file = $( '#file' );
      file.change( function () {
        var d = window.dialog.get( 'upload_tip' );
        if ( d ) {
          d.content( '正在上传…' ).showModal();
        } else {
          window.dialog( { id: 'upload_tip', content: '正在上传…' } ).showModal();
        }
        $.ajaxFileUpload( {
          url: '/open/website?a=upload',
          type: 'post',
          dataType: 'json',
          secureuri: false,
          fileElementId: 'file',
          data: { type: type, maxsize: maxsize },
          success: function ( result, status ) {
            var d = window.dialog.get( 'upload_tip' );
            if ( result.status === 1 ) {
              d.content( '上传完成。' );
              $( 'input[name=' + hidden + ']' ).val( result.data );
              $( '#' + hidden + '_img' ).attr( 'src', '/' + result.data );
            } else if ( result.status === -1 ) {
              d.content( '格式不符合。' );
            } else if ( result.status === -2 ) {
              d.content( '大小超出允许范围。' );
            } else {
              d.content( '上传失败。' );
            }
            window.setTimeout( function () {
              d.close();
            }, 1500 );
          },
          error: function ( data, status, e ) {
            console.log( e );
            var d = window.dialog.get( 'upload_tip' );
            d.content( '上传失败。' );
            window.setTimeout( function () {
              d.close();
            }, 1500 );
          }
        } );
      } );
      file.trigger( 'click' );
    } );
});


  html一部分代码:

.......
<div style="display: inline-block;margin-right: 10px;">
   <div><img id="icon_100_img" style="width: 100px;height: 100px;" alt="100x100" src="/themes/operations/images/open/website/icon_default.png"/></div>
   <div style="text-align: center;color: #BAAEAE;">100x100</div>
   <div style="text-align: center;">
      <input type="hidden" name="icon_100"/>
      <input type="button" data-hidden="icon_100" data-maxsize="20" data-type="png" value="上传" class="upload-btn js-upload"/>
   </div>
</div>
......
<div style="margin-bottom: 5px;">
   <input type="file" id="file" name="file" class="hide"/>
   <input type="submit" value="保存" class="submit-btn"/>
   <a href="javascript:history.back();">取消</a>
</div>

 
  php部分代码:

public function upload() {
    $json = array( 'status' => 0, 'data' => array() );
    $file = $_FILES[ 'file' ];
    if ( !empty( $file ) ) {
      $type = $this->request[ 'type' ];
      if ( strpos( $file[ 'type' ], $type ) !== false ) {
        $maxsize = $this->request[ 'maxsize' ];
        if ( $file[ 'size' ] <= $maxsize * 1024 ) {
          $temp = 'uploads/temp/';
          createDir( $temp );
          $newfile = randString() . '_' . date( 'YmdHis' ) . '.' . $type;
          $result = move_uploaded_file( $file[ 'tmp_name' ], $temp . $newfile );
          if ( $result ) {
            $json[ 'status' ] = 1;
            $json[ 'data' ] = 'uploads/temp/' . $newfile;
          }
        } else {
          $json[ 'status' ] = -2;
        }
      } else {
        $json[ 'status' ] = -1;
      }
    }
    die( json_encode( $json ) );
  }



 钟永标

个人头像


 热门推荐


 热门阅读