WebUploader的使用

需下載請上官網 http://fex.baidu.com/webuploader/

 

<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css">


<h2 align="center" class="page-header">上傳視頻</h2>
	<div class="demo">
		<div id="uploadfile">
		 <!--用來存放文件信息-->
			<div id="thelist" class="uploader-list" align="center"></div>
			   <div class="form-group form-inline" align="center">
			      <div id="picker" class="webuploader-container" align="center">
			         <div class="webuploader-pick" align="center">選擇文件</div>
			         <div align="center" id="rt_rt_1bs6v13uuet3mrs1f2hs8n1gfrb" style="position: absolute; top: 0px; left: 0px; width: 86px; height: 38px; overflow: hidden; bottom: auto; right: auto;">
			            <input  type="file" name="file" class="webuploader-element-invisible" multiple="multiple">
		                <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
			         </div>
			 </div>
		</div>
	</div>
 </div>
<button id="ctlBtn" class="btn btn-default" style="padding:8px 15px;">開始上傳</button>
										





<script type="text/javascript" src="webuploader/webuploader.js"></script>
<script>
$(function(){
	var $list = $('#thelist'),
        $btn = $('#ctlBtn');
    var uploader = WebUploader.create({
      resize: false, // 不壓縮image     
      swf: 'webuploader/Uploader.swf', // swf文件路徑
      server: 'movien_insert.action', // 文件接收服務端。
      pick: '#picker', // 選擇文件的按鈕。可選
     // chunked: true, //是否要分片處理大文件上傳
     // chunkSize:2*1024*1024, //分片上傳，每片2M，默認是5M
      auto: false,//選擇文件後是否自動上傳
     // chunkRetry : 2, //若是某個分片因爲網絡問題出錯，容許自動重傳次數
      //runtimeOrder: 'html5,flash',
      accept: {
        title: 'mp4',
        extensions: 'mp4',
        mimeTypes: 'mp4/*'
       }
    
    });
    // 當有文件被添加進隊列的時候
    uploader.on( 'fileQueued', function( file ) {
        $list.append( '<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上傳...</p>' +
        '</div>' );
    }); 
    // 文件上傳過程當中建立進度條實時顯示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
   
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');

        // 避免重複建立
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active" style=" width: 60%;">' +
              '<div class="progress-bar" role="progressbar" style="width: 0%">' +
              '</div>' +
            '</div>').appendTo( $li ).find('.progress-bar');
        }

        $li.find('p.state').text('上傳中');
        $percent.css( 'width', percentage * 100 + '%' );
    });
   
   
    // 文件上傳成功
    uploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).find('p.state').text('已上傳');
        window.location.href = "movien_movienmain.action";
    });

    // 文件上傳失敗，顯示上傳出錯
    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('p.state').text('上傳出錯');
    });
    // 完成上傳完
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').fadeOut();
    });
	
    $btn.on('click', function () {
            if ($(this).hasClass('disabled')) {
                return false;
            }
            var dpname=$('#ss').val();
            var descript=$('#descript').val();
           if (!descript || descript.length == 0) {
                 alert("請填寫視頻描述");
                 return false;
             }
             uploader.options.formData = { "dpname": dpname,"descript":descript};
            uploader.upload();
            // if (state === 'ready') {
            //     uploader.upload();
            // } else if (state === 'paused') {
            //     uploader.upload();
            // } else if (state === 'uploading') {
            //     uploader.stop();
            // }
        });

});
</script>

 

而後我在貼上我項目中用到的 PS:這個能夠不用看

<!-- 首頁 -->
			<div class="right_col" role="main" id="main">
			<div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12">
						<h2 align="center" class="page-header">上傳視頻</h2>
						<div class="x_panel">
							<div class="x_content">
							<div class="row">
　									<div class="item form-group">
										<div class="col-md-12 col-sm-12 col-xs-12"  align="center">
											<div class="demo">
									            <div id="uploadfile">
									                <!--用來存放文件信息-->
									                <div id="thelist" class="uploader-list" align="center"></div>
									                <div class="form-group form-inline" align="center">
									                    <div id="picker" class="webuploader-container" align="center">
									                    	<div class="webuploader-pick" align="center">選擇文件</div>
									                    	<div align="center" id="rt_rt_1bs6v13uuet3mrs1f2hs8n1gfrb" style="position: absolute; top: 0px; left: 0px; width: 86px; height: 38px; overflow: hidden; bottom: auto; right: auto;">
										                    	<input  type="file" name="file" class="webuploader-element-invisible" multiple="multiple">
										                    	<label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
									                    	</div>
									                    </div>
									                </div>
									            </div>
									        </div>
										</div>
									</div>
									</div>
							<div class="row">
　									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" style="text-align: right; font-size: 19px;">
											視頻描述
											<span class="required">*</span>
										</label>
										<div class="col-md-8 col-sm-6 col-xs-12">
											<textarea name="mov.beizhu" id="descript" style="width: 100%;"></textarea></div>
									</div>
									</div>
							<div class="row" style="padding-top: 20px;">
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" style="text-align: right; font-size: 19px;">部門<span class="required">*</span></label>
										<div class="col-md-8 col-sm-6 col-xs-12">
										
											<select name="dpname" id="ss" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2">
												<s:iterator var="dp" value="#session.dplist" >
													<option value="<s:property value="#dp.id" />"><s:property value="#dp.dpname" /></option>
												</s:iterator>
											</select>
										</div>
									</div>
									</div>
									
									<div class="ln_solid"></div>
									<div class="form-group">
										<div class="col-md-6 col-md-offset-3" align="center"> 
									          <button id="ctlBtn" class="btn btn-default" style="padding:8px 15px;">開始上傳</button>
										</div>
									</div>
							</div>
						</div>
					</div>
				</div>
			
			
			
			
			
			
			
			
			
		<%-- 	
			<div class="demo">
            <div id="uploadfile">
                <!--用來存放文件信息-->
                <div id="thelist" class="uploader-list"></div>
                <div class="form-group form-inline">
		                <table >
						<tr>
							<td style="background-color: gray;">部門</td>
							<td>
							<select name="dpname" id="ss">
								<s:iterator var="dp" value="#session.dplist" >
									<option value="<s:property value="#dp.id" />"><s:property value="#dp.dpname" /><s:property value="#dp.id" /></option>
								</s:iterator>
							</select>
							<td style="background-color: gray;">視頻描述</td>
							<td><textarea name="mov.beizhu" id="descript"></textarea></td>
						</tr>
					</table>
                    <div id="picker" style="float:left" class="webuploader-container">
                    	<div class="webuploader-pick">選擇文件</div>
                    	<div id="rt_rt_1bs6v13uuet3mrs1f2hs8n1gfrb" style="position: absolute; top: 0px; left: 0px; width: 86px; height: 38px; overflow: hidden; bottom: auto; right: auto;">
	                    	<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple">
	                    	<label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
                    	</div>
                    </div> 
                    <button id="ctlBtn" class="btn btn-default" style="padding:8px 15px;">開始上傳</button>
                </div>
            </div>
        </div> --%>
        </div>