• 文件异步上传方式(二)


    为了浏览器兼容,js目前需要借助flash的力量实现文件异步上传。swfupload是用使用最广泛的文件上传flash。

    文件目录:

    /test.html   上传页面,表单所在页面

    /test.php    处理上传的controller

    /swfupload/swfupload.js     此文件夹中放swfupload相关资源

    /swfupload/handlers.js       

    /swfupload/swfupload.swf

    /upfiles/                            上传文件的存放目录

    test.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>异步上传文件demo</title>
    <!-- 导入相关资源 -->
    <script type="text/javascript" src="swfupload/swfupload.js"></script>
    <script type="text/javascript" src="swfupload/handlers.js"></script>
    <script type="text/javascript">
    		var swfu;
    
    		window.onload = function() {
    			var settings = {
    				flash_url : "swfupload/swfupload.swf",	//上传flash位置
    				upload_url: "test.php",					//接受上传的服务端脚本
    				file_size_limit : "100 MB",				//上传文件大小限制
    				file_post_name : "upfile",				//服务端接受文件名,相当于input name
    				file_types : "*.*",						//上传文件类型
    				file_types_description : "All Files",	//上传文件类型描述
    				file_upload_limit : 100,				//上传文件数限制
    				file_queue_limit : 0,
    				custom_settings : {
    					cancelButtonId : "btnCancel"
    				},
    				debug: false,
    
    				// Button settings
    				//button_image_url: "about:blank",		//可以为上传按钮设背景图
    				button_ "100",					//上传按钮宽
    				button_height: "30",					//上传按钮高
    				button_placeholder_id: "spanButtonPlaceHolder",	//上传按钮ID
    				button_text: '<span class="theFont">上传文件</span>',	//按钮文本和样式
    				button_text_style: ".theFont { font-size: 14; text-align:center;}",
    				
    				swfupload_preload_handler : preLoad,
    				swfupload_load_failed_handler : loadFailed,
    				file_queued_handler : fileQueued,
    				file_queue_error_handler : fileQueueError,
    				file_dialog_complete_handler : fileDialogComplete,
    				upload_start_handler : uploadStart,
    				upload_progress_handler : uploadProgress,
    				upload_error_handler : uploadErrorCo,	//以下三个函数自定义,出错,成功,完成后做什么,其它的不用管
    				upload_success_handler : uploadSuccessCo,
    				upload_complete_handler : uploadCompleteCo
    			};
    
    			swfu = new SWFUpload(settings);
    	     };
    		 function uploadErrorCo(data){
    			alert("上传失败");
    		 }
    		 function uploadSuccessCo(data){
    			document.getElementById("uploadedFile").innerHTML = data.name;
    		 }
    		 function uploadCompleteCo(data){
    		 }
    	</script>
    </head>
    <body>
    <div id="content">
    	<form id="form1" action="test.php" method="post" enctype="multipart/form-data">
    		<span id="spanButtonPlaceHolder"></span>
    		<span style="font-size: 14px; vertical-align:top; display:inline-block; 100px; height:30px; text-align:center;" id="uploadedFile"></span>
    		<!-- 取消 -->
    		<button style="display:none;" id="btnCancel">取消</button>
    	</form>
    </div>
    </body>
    </html>
    

    test.php

    <?php
    	var_dump($_FILES);
    	if(isset($_FILES['upfile']) && $_FILES['upfile']['error']>0){
    		echo '上传出错';
    	}else{
    		move_uploaded_file($_FILES["upfile"]["tmp_name"],"upfiles/".$_FILES["upfile"]["name"]);
    	}
    ?>
    

    如此看来,swfupload.swf并不是根据php的返回结果确定是否已上传成功。或者是我不清楚如果判断。

    用swfupload上传能做到"比较"炫,可以一次上传多个文件,可以显示进度,可以取消等

    另,swfupload资源下载点这里

  • 相关阅读:
    MySQL注入总结
    使用JavaScript扫描端口
    dvwa+xampp搭建显示乱码的问题:解决办法
    精读《12 个评估 JS 库你需要关心的事》
    TinyMCE上传图片word
    xhEditor上传图片word
    JAVA大文件(100G以上)的上传下载实现技术
    JAVA大文件(1G以上)的上传下载实现技术
    java 支持 超大上G,多附件上传问题
    java 支持 超大上G,多附件上传方法
  • 原文地址:https://www.cnblogs.com/frostbelt/p/3430745.html
Copyright © 2020-2023  润新知