JQuery.uploadify 上传文件插件的使用详解 for A

2016-02-19 13:53 62 1 收藏

今天图老师小编给大家介绍下JQuery.uploadify 上传文件插件的使用详解 for A,平时喜欢JQuery.uploadify 上传文件插件的使用详解 for A的朋友赶紧收藏起来吧!记得点赞哦~

【 tulaoshi.com - Web开发 】

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

1. 下载

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

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

下载解压后:

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

2.创建工程:

结构如图

文件说明:

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)代码如下:
%@ 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"
titlejquery.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.最后说说:这个只是一个简单的入门例子,至于界面可以根据自己的需要去改

来源:https://www.tulaoshi.com/n/20160219/1605561.html

延伸阅读
标签: Web开发
打包下载 jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。 webdesignledger.com 网站推选了2009年度最佳 jQuery 插件,有些插件在本博客中已经有介绍,有些还没有,本文介绍的是:2009年度最佳 jQuery 插件—Anything...
标签: Web开发
  文件打包下载 代码如下: /* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显...
标签: Web开发
打包下载 如下图: 但是这些弹出来的窗口的样式非常的单调无法设置,并且窗口标题还根据不同的浏览器显示不同的标题内容,非常的丑陋!对于高审美观的现代人来说,就大打折扣了! jQuery现在这么流行、这么火,但网上却好像还是没有提供类似于MessageBox的插件(或者只是我没有找到而已),类似的模式窗口插件倒是有一大堆,但这都不是...
标签: Web开发
如果你查找Jquery的API,会发现这个好象是Jquery的一个盲点,找来找去也没有明确说明用什么办法可以取到HTML标签的名字,如果直接用 $("H1").tagName 这样的方式也无法取到“H1”这样的值,好象只会得到“undifined”。 后来发现Jquery居然将tagName也视为属性之一了,有趣。 所以用 $("H1").attr("tagName") !DOCTYPE html PUBLIC "-...
标签: Web开发
2008-07-22 14:47 bug描述:ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态。 这个bug已经修复,请重新下载。 2008/7/17 14:12:00 jQuery formValidator 3.1ver 1、为inputValidator增加empty属性。用于设置控件文本值是否允许两边为空。具体请看demo1里的密码的校验代码。 该...