如何在一个页面中使用多个SWFUpload对象上传文件

首先需要引入相应的样式和JS文件，还需要借助jQuery的js

提供下载路径：http://pan.baidu.com/s/1EUzca

① 引入js

　　<script type="text/javascript" src="${pageContext.request.contextPath }/js/swfupload/swfupload/swfupload.js"></script>
　　<script type="text/javascript" src="${pageContext.request.contextPath }/js/swfupload/js/swfupload.queue.js"></script>
　　<script type="text/javascript" src="${pageContext.request.contextPath }/js/swfupload/js/fileprogress.js"></script>
　　<script type="text/javascript" src="${pageContext.request.contextPath }/js/swfupload/js/handlers.js"></script>

② 初始化SWFUpload对象（红色的需要注意）

　　　　　　　　　　　　　　$(document).ready(function() {　　　　　　　　　　　　　　　　  //初始化第一个SWFUpload对象
                var upload1 = new SWFUpload({

                    //提交路径
                    upload_url: "${pageContext.request.contextPath }/upload3.action",
                    //向后台传递额外的参数
                    post_params: {"name" : "identifier_img_"},
                    //上传文件的名称
                    file_post_name: "file",

                    // 下面自己按照字面意思理解
                    file_size_limit : "51200",    // 100MB
                    file_types : "*.jpg;*.gif;*.png",
                    file_types_description : "*.jpg;*.gif;*.png",
                    file_upload_limit : "10",//最多上传几次
                    file_queue_limit : "1",//每次最多上传几个

                    // 事件处理
                    file_dialog_start_handler : fileDialogStart,//在文件选取窗口将要弹出时触发
                    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 : uploadError,
                    upload_success_handler : uploadSuccess,//上传完成后的回调函数
                    upload_complete_handler : uploadComplete,

                    // 按钮的处理
                    button_image_url : "${pageContext.request.contextPath }/js/swfupload/swfupload/uploadbutt.jpg",
                    button_placeholder_id : "spanButtonPlaceholder1",
                    button_width: 100,
                    button_height: 28,
                    //button_text:‘<span class="theFont">选择添加</span>‘,

                    // Flash Settings
                    flash_url : "${pageContext.request.contextPath }/js/swfupload/swfupload/swfupload.swf",

                    custom_settings : {
                        progressTarget : "fsUploadProgress1",
                        cancelButtonId : "btnCancel1"
                    },

                    // Debug Settings
                    debug: false
                });
                　　　　　　　　　 //初始化第二个SWFUpload对象
                var upload2 = new SWFUpload({

                    //提交路径
                    upload_url: "${pageContext.request.contextPath }/upload3.action",
                    //向后台传递额外的参数
                    post_params: {"name" : "identifier_img_"},//为图片重命名的前缀
                    //上传文件的名称
                    file_post_name: "file",//传给后台的name="file"

                    // 下面自己按照字面意思理解
                    file_size_limit : "51200",    // 100MB
                    file_types : "*.jpg;*.gif;*.png",
                    file_types_description : "*.jpg;*.gif;*.png",
                    file_upload_limit : "10",//最多上传10次
                    file_queue_limit : "1",//每次最多上传一个

                    // 事件处理
                    file_dialog_start_handler : fileDialogStart,//在文件选取窗口将要弹出时触发
                    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 : uploadError,
                    upload_success_handler : uploadSuccess,
                    upload_complete_handler : uploadComplete,

                    // 按钮的处理
                    button_image_url : "${pageContext.request.contextPath }/js/swfupload/swfupload/uploadbutt.jpg",
                    button_placeholder_id : "spanButtonPlaceholder2",
                    button_width: 100,
                    button_height: 28,
                    //button_text:‘<span class="theFont">选择添加</span>‘,

                    // Flash Settings
                    flash_url : "${pageContext.request.contextPath }/js/swfupload/swfupload/swfupload.swf",

                    custom_settings : {
                        progressTarget : "fsUploadProgress2",
                        cancelButtonId : "btnCancel2"
                    },

                    // Debug Settings
                    debug: false
                });　　　　　　});

③ 定义需要的处理函数

　　　　　　function uploadSuccess(file, server) {

                var progress = new FileProgress(file, this.customSettings.progressTarget);
                progress.setComplete();
                progress.setStatus("上传成功"+server);
                progress.toggleCancel(false);

                //后台传递回来的内容
                var symbol="identifier_img_";
                var object = document.getElementsByName(‘name‘);
                var url=symbol+object[object.length-1].value;（后台返回的文件名称。如：identifier_img_123232453655634.jpg）
              var type = $("#upload_type").val();
                if(type == ‘1‘){
                    $("#sfzPath").val("/upload/up3/"+url);
                    $("#sfzImg").attr("src","${pageContext.request.contextPath }/upload/up3/"+url);
                    $(".img1").show();
                    $(".img2").hide();
                }else if(type == ‘2‘){
                    $("#yyzzPath").val("/upload/up3/"+url);
                    $("#yyzzImg").attr("src","${pageContext.request.contextPath }/upload/up3/"+url);
                    $(".img2").show();
                    $(".img1").hide();
                }
            }

            function fileQueueError(file, errorCode, errorMsg) {
                var msgText = "上传失败\n";
                switch (errorCode) {
                    case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
                        msgText += "每次最多选择上传 " + this.settings.file_queue_limit + "个文件,　　　　　　　　　　　　　　　　　　　　　并且最多只能选择"+this.settings.file_upload_limit+"次";
                        break;
                    case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
                        msgText += "文件大小超过限制( " + this.settings.file_size_limit + "KB )";
                        break;
                    case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
                        msgText += "文件大小为0";
                        break;
                    case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
                        msgText += "文件格式不正确，仅限 " + this.settings.fileTypeExts;
                        break;
                    default:
                        msgText += "错误代码：" + errorCode + "\n" + errorMsg;
                }
                alert(msgText);
            }

④ 定义HTML（红色部分与JS关联）

　
<!--第一个按钮-->


　　<li>
　　　　<input id="btnCancel1" type="hidden" value="" onclick="cancelQueue(upload1);" disabled="disabled"  />
　　　　<span class="tit_zhxg" style="width:200px;">证件上传SWF1：</span>
　　　　<span id="spanButtonPlaceholder1"></span>
　　</li>
　　<li>
　　　　<div style="display: none" class="fieldset flash" id="fsUploadProgress1">
　　　　　　<span class="legend">文件上传</span>
　　　　</div>
　　</li>
　　<li class="img1"  style="display:none;">
　　　　<span class="tit_zhxg">图片上传预览：</span>
　　</li>
　　<li class="img1" style="display:none;margin-top: -10px; height: 85px;margin-bottom:98px;">
　　　　<span class="tit_zhxg">&nbsp;&nbsp;</span>
　　　　<img src="" style="width: 340px; height:180px;" id="sfzImg">
　　　　<input type="hidden" name="IMGPATH" value="" id="sfzPath">
　　</li>

<!--第二个按钮-->


　　<li>
　　　　<input id="btnCancel2" type="hidden" value="" onclick="cancelQueue(upload2);" disabled="disabled"  />
　　　　<span class="tit_zhxg" style="width:200px;">证件上传SWF2：</span>
　　　　<span id="spanButtonPlaceholder2"></span>
　　</li>
　　<li>
　　　　<div style="display: none" class="fieldset flash" id="fsUploadProgress2">
　　　　　　<span class="legend">文件上传</span>
　　　　</div>
　　</li>
　　<li class="img1"  style="display:none;">
　　　　<span class="tit_zhxg">图片上传预览：</span>
　　</li>
　　<li class="img1" style="display:none;margin-top: -10px; height: 85px;margin-bottom:98px;">
　　　　<span class="tit_zhxg">&nbsp;&nbsp;</span>
　　　　<img src="" style="width: 340px; height:180px;" id="yyzzImg">
　　　　<input type="hidden" name="IMGPATH" value="" id="yyzzPath">
　　</li>


 


⑤ 编写后台处理程序


　　private File file;//传来的文件FILE
	　　private String fileFileName;//文件名
	　　private String fileContentType;//文件类型
	　　private String savePath;//保存路径
    　　private String name;//额外的参数
    　　HttpServletRequest request = ServletActionContext.getRequest();


　　//getters and setters


  public String up3() throws Exception {
        InputStream is = new FileInputStream(file);
        String root = getSavePath();
        String tempName = System.currentTimeMillis()+this.getFileFileName().substring(this.getFileFileName().indexOf("."));    

        String saveName=this.getName()+this.getFileFileName().substring(this.getFileFileName().indexOf("."));
        File deskFile = new File(root,this.getName()+tempName);//+"_"+this.getFileFileName());
        this.setName(tempName);
        OutputStream os = new FileOutputStream(deskFile);
        byte[] bytefer = new byte[1024];
        int length = 0;

        while ((length = is.read(bytefer)) != -1) {
            os.write(bytefer, 0, length);
        }
        os.close();
        is.close();
        return "success";
    }


⑥ 编写配置文件


<action name="upload3" class="com.action.FileUploadAction" method="up3">
　　<param name="savePath">/upload/up3</param>　　<result name="success">js/swfupload/fh.jsp</result></action>

fh.jsp

<input name="name" value="${name}">

				


				
时间： 2024-12-28 20:44:35 

		


		


	

	
	

		


		
如何在一个页面中使用多个SWFUpload对象上传文件的相关文章


								

		

			

                swfupload组件上传文件
			

		

		

									

				前段时间做文件上传用的是H5的一个插件,由于浏览器的兼容性不好,所以又换了一个Flash版本的上传文件插件.不过,由于后续浏览不再支持Flash(略囧),所以,暂时还没有找到能够完美兼容浏览器的上传文件插件.各位网友如果有好的插件,请推荐下. View代码: 1 <html> 2 <head> 3 <meta name="viewport" content="width=device-width" /> 4 <title&g			

		

	

				

		

			

                CentOS7中利用Xshell6向虚拟机本地上传文件
			

		

		

									

				环境交代 Linux系统:CentOS7, Xshell版本:6 操作步骤 下面我们以一个文件上传来演示用法 第一步 在Xshell中点击如下图标,或者直接按 Alt+Ctrl+F来新建文件传输 出现弹窗直接关闭即可 然后会出现以下界面 输入help 查看可用命令 我们主要用到的命令有put, cd, ls, lls, pwd, lpwd 第二步 选择文件夹 第三步 上传文件 命令行输入put 上传完成. 注意 上传文件时,本地路径最好不要修改,否则可能会出现 sftp: cannot open			

		

	

				

		

			

                页面中使用多个element-ui upload上传组件时绑定对应元素
			

		

		

									

				elemet-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是有时候会存在多次复用上传组件的需求,如下图的样子,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢? 之前在网上找到了一位大神的方法,修改源码,在回调函数中多加一个参数,但是这种方法在多人开发时不太适用,因为这要求所有人都要修改源码,这里附上大神的方法,大家可以酌情使用 首先在你下个包里面找到node_modules/element-ui/lib/element-ui.common.js 然后在里面			

		

	

				

		

			

                使用SWFUpload插件上传文件
			

		

		

									

				演示代码由两部分组成,包括前台文件和后台文件: 1.前台文件index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <m			

		

	

				

		

			

                ASP.NET MVC中，怎么使用jquery/ajaxForm上传文件
			

		

		

									

				ajaxForm插件最好选择:jquery forms plugin. 以下为示例: Ajax.BeginForm @using (Ajax.BeginForm("YourAction", "YourController", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data"})) { @Html.AntiForger			

		

	

				

		

			

                在github中新建仓库后，如何上传文件到这个仓库里面。
			

		

		

									

				[email protected] MINGW64 /e/github.io (master) $ git remote [email protected] MINGW64 /e/github.io (master) $ git remote add origin [email protected]:hglibin/hglibin.github.io.git [email protected] MINGW64 /e/github.io (master) $ git fetch origin re			

		

	

				

		

			

                Android应用开发中webview上传文件的几种思路
			

		

		

									

				1. 常规方法,重写WebChromeClient 的 openFileChooser 方法 private class MyWebChromeClient extends WebChromeClient { // For Android 3.0+ public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) { if (mUploadMessage != null) return; mUploadMe			

		

	

				

		

			

                IIS8中 出现ashx 401：未授权，uploadify上传文件失败
			

		

		

									

				环境:阿里云服务器 windows2012  + IIS8 +asp.net 访问IIS 出现能正常访问aspx页面,但是通过ajax访问ashx上传文件的时候就出现ashx  Status Code:401 Unauthorized. 检查ashx所在文件夹.上传文件夹的IIS_USR权限也都是有的,而且ashx也能正常访问返回数据. 突然看到博客上介绍需要IUSR权限, 操作方法: 在需要上传的文件夹上面,右键->属性->安全->编辑->添加->[输入对象名称IUSR],			

		

	

				

		

			

                node.js+react全栈实践-Form中按照指定路径上传文件并
			

		

		

									

				书接上回,讲到“使用同一个新增弹框”中有未解决的问题,比如复杂的字段,文件,图片上传,这一篇就解决文件上传的问题.这里的场景是在新增弹出框中要上传一个图片,并且这个上传组件放在一个Form中,和其他文本字段一起提交给接口. 这里就有几个要注意的问题: 图片上传时最好能在前端指定图片类型,根据这个类型上传到指定的目录.比如这里是新增用户,上传用户图片,那么这里就指定类型是“user”,那么就把这个文件上传到服务器的upload/user目录中.这样方便后期维护,比如要把项目中的文件统一迁移到另外一