开发者社区> mcy247> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

文件上传~Uploadify上传控件

简介:
+关注继续查看

对于文件上传来说,有很多种实现方式,如传统的表单方式,现在流行的flash方式,甚至还有纯JS方式,之所以有这些方式来实现文件上传,我想主要原因是因为,传统的上传对于大文件支持不够,因为它是单线程同步机制,当大文件通过HTTP方式发送到服务端时,对于服务端站点的主线程影响比较大,会产生阻塞,所以,现在很多上传控制都是异步,多线程的方式去实现的.

今天来介绍一个文件上传控制,它就是Uploadify,它应该是flash的异步上传工具,对于大文件支持还不错,所以,我选择了它.

相关API介绍

uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。 
script :   后台处理程序的相对路径 。默认值:uploadify.php 
checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 
fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata 
method : 提交方式Post 或Get 默认为Post 
scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain  
folder :  上传文件存放的目录 。 
queueID : 文件队列的ID,该ID与存放文件队列的div的ID一致。 
queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999 。 
multi : 设置为true时可以上传多个文件。 
auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。

fileExt : 设置可以选择的文件的类型,格式如:'*.jpg;*.gif,*.png' 。

fileDesc : 这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择图像文件”,
sizeLimit : 上传文件的大小限制 。 
simUploadLimit : 允许同时上传的个数 默认值:1 。 
buttonText : 浏览按钮的文本,默认值:BROWSE 。 
buttonImg : 浏览按钮的图片的路径 。 
hideButton : 设置为true则隐藏浏览按钮的图片 。 
rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。 
width : 设置浏览按钮的宽度 ,默认值:110。 
height : 设置浏览按钮的高度 ,默认值:30。 
wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。 
cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标

结构图

HTML代码

<div>
    <div class="inputDiv fl">
        <input type="text" name="ImagePath" id="ImagePath" style="width: 600px;">
        <img style="display: none;" />
    </div>
    <div class="fl" style="position: relative;">
        <input id="custom_file_uploadEdu" type="file" class="btn" />
        <a href="javascript:$('#custom_file_uploadEdu').uploadifyUpload()">上传</a>| 
      <a href="javascript:$('#custom_file_uploadEdu').uploadifyClearQueue()">取消上传</a>
    </div>
    <div id="displayMsg"></div>
</div>

JS代码

<script type="text/ecmascript">

    $("#custom_file_uploadEdu").uploadify({
        'uploader': '/Scripts/Uploadify/uploadify.swf',
        'script': '/ashx/UploadFile.ashx',
        'cancelImg': '/Scripts/Uploadify/uploadify-cancel.png',
        'folder': '/',
        'queueSizeLimit': 1,
        'simUploadLimit': 1,
        'sizeLimit ': 1024 * 1024 * 5,
        'multi': false,
        'auto': false,/*如果是自动上传,那上传按钮将没用了*/
        'fileExt': '*.jpg;*.gif;*.jpeg;*.mp4',
        'fileDesc': '请选择图像或者视频',
        'queueID': 'fileQueue',
        'width': 110,
        'height': 30,
        'buttonText': '选择',
        'wmode': 'opaque',
        'hideButton': false,
        'onSelect': function (event, ID, fileObj) {
            $("#displayMsg").html("上传中......");
        },
        'onComplete': function (event, queueId, fileObj, response, data) {
            var ary = response.split('|');
            if (ary[0] == "0") { //提示错误信息
                alert(ary[1]);
            }
            else {
                if (ary[0]=="1") {//上传后的URL
                    $("#displayMsg").html("上传成功")
                    $("#ImagePath").attr("value", ary[1]);
                    $("#ImagePath").remove("img").next("img").show().attr({ "style": "width:50px;height:50px;", "src": ary[1] });
                } else {//异常信息
                    alert(ary[1]);
                }
            }
        }
    });
</script>

后台处理程序(接收流,写入流)

namespace WebTest.ashx
{
    /// <summary>
    /// UploadFile 的摘要说明
    /// </summary>
    public class UploadFile : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            context.Response.Write(new UploadImpl().Upload(context, UpLoadType.ProductImage, false));

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

}

UploadImpl类代码

 View Code

效果图

本文转自博客园张占岭(仓储大叔)的博客,原文链接:文件上传~Uploadify上传控件,如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
uploadify 实现文件上传
uploadify官网我们需要到官网上下载需要的插件引入到项目中,同时我们最好看看uploadify的中文文档,当然直接把下面的代码复制作为一个工具类也行,反正都是大同小异.
897 0
本地上传图片预览
图片上传本地预览,获得图片的base64(可压缩) .upload_image {  width: 800px; } 点击上传图片 提交 var im...
719 0
Jquery上传插件Uploadify无刷新上传文件
Uploadify v3.2.1  上传图片并预览 前端JSP: &lt;script type="text/javascript"&gt;                             $(function() {                 $("#upload_org_code").uploadify({                     'height'    
1754 0
Uploadify文件上传
一、简介    Uploadify 是一种基于html5 或 flash的多文件上传的jQuery插件。Uploadify可以支持多种定制。它是一种异步的文件上传插件。下载网站为http://www.uploadify.com/。
1021 0
swfupload 上传控件的配置
第一:下载swfupload控件,点击下载:   第二,解压缩后,在项目中添加这四个文件,如图:     然后,在你的js文件中添加这段代码: /** * *定义swfupload配置文件对象 **/ var swfObj = { // Backend Settings upload_url: ".
466 0
文件上传并生成缩略图之一
文件上传是php程序中经常用到的,在上传文件之中需要考虑很多问题,例如上传文件的格式,大小,尺寸,预览 ,缩放切割,加水印,批量上传等等问题,  下面这段程序主要实现图像的上传预览功能且实现生成三种大小的图片(原图也保存了),这个程序主要是针对jpg格式的图片上传.
665 0
+关注
mcy247
做自己的太阳 无需凭借谁的光
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载