fineuploader是一款基于ajax实现文件上传的插件,具有以下有点:

A:支持文件上传进度显示.

B:文件拖拽浏览器上传方式

C:Ajax页面无刷新.

D:多文件上传.

F:跨浏览器.

E:跨后台服务器端语言.

GitHub下载地址:https://github.com/valums/file-uploader

现已更新地址到:https://github.com/FineUploader/fine-uploader

系在后目录结构如下

aaarticlea/png;base64,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" alt="" />

项目中引用fineuploader-3.3.1.css和fineuploader-3.3.1.min.js即可

上传测试页面:Demo.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Fine Uploader Demo</title>
<link href="../../App_Common/fineuploader/fineuploader-3.3.1.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="manual-fine-uploader">
</div>
<button id="triggerUpload" onclick="Upload();" style="margin-top: 10px;">
Upload now
</button>
<script type="text/javascript" src="../../App_Common/fineuploader/fineuploader-3.3.1.js" ></script>
<script type="text/javascript" src="../../App_Common/jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
var manualuploader = new qq.FineUploader({
autoUpload :false,
element: document.getElementById("manual-fine-uploader"),
request: {endpoint: 'Handler.ashx'},
text: {uploadButton: '选择文件'},
validation:{allowedExtensions: ['jpeg', 'jpg', 'txt','rar','zip','doc','docx','xls','xlsx'],sizeLimit: 100*(1024*1024)},
callbacks: {
onComplete: function (id, name, responseJSON) {
if (responseJSON.success) {
//$(".qq-upload-list").hide();
alert(name+"上传成功");
}
}
},
deleteFile:{
enabled: true,
endpoint: 'Handler.ashx',
},
debug: true
});
$("#triggerUpload").click(function(){manualuploader.uploadStoredFiles();});
});
</script>
</body>
</html>

服务端接收:Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Collections.Generic;
using System.Web;
using System.IO;
using System.Web.Script.Serialization; public class Handler : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if (context.Request != null && context.Request.Files.Count > )
{
HttpPostedFile file = context.Request.Files["qqfile"];//上传文件对象
string uploadPath = context.Server.MapPath("~/UpLoad/QueOperation/");
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
string ExtName = Path.GetExtension(file.FileName);
string FileName = Path.GetFileNameWithoutExtension(file.FileName);
//string fileName = "【" + FileName + "】" + DateTime.Now.ToString("yyyyMMddHHmmss") + ExtName;
file.SaveAs(uploadPath + FileName + ExtName);
context.Response.Write("{\"success\":\"true\"}");
}
}
} public bool IsReusable
{
get
{
return false;
}
}
}

上传文件要因为js封装用到qq-template模板,系统自带三个这里就用默认模板

也可以将以下template直接方放入页面

<!--
This is a legacy template and is not meant to be used in new Fine Uploader integrated projects.
Read the "Getting Started Guide" at http://docs.fineuploader.com/quickstart/01-getting-started.html
if you are not yet familiar with Fine Uploader UI.
-->
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
<li>
<div class="qq-progress-bar-container-selector">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul> <dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog> <dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog> <dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>

纯js上传控件——fineuploader的更多相关文章

  1. js上传控件 plupload 使用记录

    最近一个项目需要使用一个上传控件进行多图片上传,给用户更好的体验,找到了plupload,用了一下感觉还是不错的, 1.从官网上  可以获得例子 ,我集成到了jsp,如下: <%@ page l ...

  2. jquery.html5uploader.js 上传控件

    插件地址:http://blog.csdn.net/never_say_goodbye/article/details/8598521 先上个效果图: 相比来说,效果还是很不错的 使用MVC3做服务器 ...

  3. Js获取file上传控件的文件路径总结

    总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = functi ...

  4. java+Word图片上传控件

    这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...

  5. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  6. 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

    前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...

  7. 基于AngularJs的上传控件-angular-file-upload

    今天跟大家分享的是一个依赖于angular的上传控件. 前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用 ...

  8. [转]html5表单上传控件Files API

    表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...

  9. jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!!)

    我用到的原材料地址:http://www.cnblogs.com/leejersey/p/3660202.html 修改后: /// <reference path="../../Js ...

随机推荐

  1. Java 存储过程调用

    //配置文件 private static ClientServiceConfigUtil configUtil = new ClientServiceConfigUtil("/Databa ...

  2. 2016 Sichuan Province Programming Contest

    2016 Sichuan Province Programming Contest 代码 2016 Sichuan Province Programming Contest A. Nearest Ne ...

  3. URAL 1077 Travelling Tours(统计无向图中环的数目)

    Travelling Tours Time limit: 1.0 secondMemory limit: 64 MB There are N cities numbered from 1 to N ( ...

  4. HDU-1542 Atlantis(离散化+扫描线)

    题目大意:给n个矩形,可能重叠,求面积. 题目分析:线段树维护扫描线. 代码如下: # include<bits/stdc++.h> using namespace std; # defi ...

  5. poj1984 带权并查集

    题意:有多个点,在平面上位于坐标点上,给出一些关系,表示某个点在某个点的正东/西/南/北方向多少距离,然后给出一系列询问,表示在第几个关系给出后询问某两点的曼哈顿距离,或者未知则输出-1. 只要在元素 ...

  6. java的nio之:浅析I/O模型

    也许很多朋友在学习NIO的时候都会感觉有点吃力,对里面的很多概念都感觉不是那么明朗.在 进入Java NIO编程之前,我们今天先来讨论一些比较基础的知识:I/O模型.下面本文先从同步和异步的概念 说起 ...

  7. 论文笔记之:Attention For Fine-Grained Categorization

    Attention For Fine-Grained Categorization Google ICLR 2015 本文说是将Ba et al. 的基于RNN 的attention model 拓展 ...

  8. Intel指令集专有词解释

    SSE 概述 SSE(Streaming SIMD Extensions)是英特尔在AMD的3D Now!发布一年之后,在其计算机芯片Pentium III中引入的指令集,是MMX的超集.AMD后来在 ...

  9. 利用sql_trace跟踪一个指定会话的操作

    1.  sys用户给管理用户授权.SQL> grant execute on sys.dbms_system to andy;Grant succeeded.2. 查询被跟踪用户的sid,ser ...

  10. OAuth2.0详解

    1.使用场景 A系统存放着订单信息 B系统需要查询A系统中的订单信息,但是必须要A系统验证通过后,才能查询. 此时,我们有两种验证方式: 1)拥有A系统的账户/密码 弊端是对A系统来说,直接提供账户/ ...