zoukankan      html  css  js  c++  java
  • JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

    今天下午整理文件上传的例子,感觉收集到的例子都很不人性话,后来找到一个还可以的,本来想改成类似于腾讯QQ相册那种方式,仔细看了一下是Flash的, 而且那个极速上传插件也不知道用什么做的?问了一下,说是什么cgi. 搞得一头雾水!

    后来朋友推荐了一个这个叫uploadify的上传插件,似乎挺好,就到官方下了个示例运行,感觉挺好,自己再稍加美化一下就OK 了..!

    接下来就讲讲使用过程吧:

    1. 下载

       官方网站:http://www.uploadify.com/

       直接下载:jquery.uploadify-v2.1.0.zip

       我的Demo: MyUpload.rar                官方网站也有demo

       下载解压后:

         

         说明:它里面有demo  但是是PHP的,还有一个帮助文档:uploadify v2.1.0 Manual.pdf.

    2.创建工程:

        结构如图>>

       

        文件说明:

         A.js文件夹下的所有文件:必需,从下载下来的包里解压复制过来,名字可以自己改改

       B.Default.aspx:测试页,后台没有代码

        

    代码
    <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

    <!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">
    <head runat="server">
        
    <title>jquery.uploadify 上传插件的使用</title>
        
    <link rel="Stylesheet" href="js/uploadify.css" />

        
    <script type="text/javascript" src="js/jquery.min.js"></script>

        
    <script type="text/javascript" src="js/swfobject.js"></script>

        
    <script type="text/javascript" src="js/jquery.uploadify.min.js"></script>

        
    <script type="text/javascript">
           $(document).ready(function() {
                $(
    "#uploadify").uploadify({
                    
    'uploader''js/uploadify.swf',
                    
    'script''Upload.aspx',
                    
    'cancelImg''js/cancel.png',
                    
    'folder''upload',
                    
    'queueID''fileQueue',
                    
    'auto'false,
                    
    'multi'true,
                   
                });
            });  
        
    </script>

    </head>
    <body>
        
    <form id="form1" runat="server">
            
    <input type="file" name="uploadify" id="uploadify" />
            
    <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()"> 取消上传</a>
            
    <div id="fileQueue"></div>
        
    </form>
    </body>
    </html>

         C.Upload.aspx: 处理上传文件

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Upload.aspx.cs" Inherits="WebApplication2.Upload" %>
    代码
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.IO;

    namespace WebApplication2
    {
        
    public partial class Upload : System.Web.UI.Page
        {
            
    protected void Page_Load(object sender, EventArgs e)
            {

                HttpPostedFile file 
    = Request.Files["FileData"];
                
    string uploadpath = Server.MapPath(Request["folder"+ "\\");

                
    if (file != null)
                {
                    
    if (!Directory.Exists(uploadpath))
                    {
                        Directory.CreateDirectory(uploadpath);
                    }
                    file.SaveAs(uploadpath 
    + file.FileName);
                    Response.Write(
    "1");
                }
                
    else
                {
                    Response.Write(
    "0");
                }
            }
        }
    }

         D.upload这个文件加也是必需

    3.运行结果:

      

    4.最后说说:这个只是一个简单的入门例子,至于界面可以根据自己的需要去改

  • 相关阅读:
    Java操作excel,读取及导出
    vue 在package.json配置对外暴露访问地址(手机端访问本地项目地址)
    element UI upload组件上传附件格式限制
    linux之vim/vi快速复制多行内容的快捷键
    使用vant的Toast组件时提示not defined
    如何使用js判断当前页面是pc还是移动端打开的
    JavaScript 保留两位小数函数
    Linux其他命令
    linux学习ls的三个选项 lha的作用和隐藏文件的知识
    vue+ element-ui el-table组件自定义合计(summary-method)坑
  • 原文地址:https://www.cnblogs.com/xiaopin/p/1653523.html
Copyright © 2011-2022 走看看