觉得蛋疼的上传控件

最近公司有相应的需求,需要上传LOGO,所以我就做了一个可以拖拽也可以点击上传的控件。

同时对控件做了如下描述:

DACUpload是基于XHR的上传控件,可以通过拖拽图片或单击区域即可上传图片文件;上传完成的图片显示在控件中。

对控件的属性和方法描述如下。

属性:


名称


描述


默认值


IsShow


是否只是显示。Ture:图片可以拖拽和单击上传,上传过后可以删除重新上传。False:只显示上传的图片,或者仅仅显示一个区域,不能拖拽上传和单击上传。


false


Height


显示区域高度


130


Width


显示区域宽度


130


UploadUri


上传路径


‘‘


DownloadUri


下载路径


‘‘


MaxLoadSize


最大上传大小(M)


20


FilePath


显示时,文件的服务器路径


‘‘


Language


语系。目前有三种语系:zh_CN zh_TW en_US 。


zh_CN

 

方法:


名称


描述


OnUploadImageSuccess


文件上传后的回调函数。非异常情况下,返回的格式应按照如下格式:

{State:true,Message: ”上传成功”,JsonData:”文件名称”}

Demo

1、  添加DAC.js

2、写入HTML:<div id="LOGO_PHOTO" style="margin-left:100px;"></div>

3、上传模式

$(document).ready(function () {

$(‘#LOGO_PHOTO‘).DragAndClick({

IsShow: false,

Height: ‘230‘,

Width: ‘230‘,

UploadUri: ‘ http://localhost:335/UploadFile/‘,//上傳的路徑

DownloadUri: ‘ http://localhost:336/Attachment/‘,//下載的路徑

MaxLoadSize: 20,//上傳大小限制

Language: ‘zh_TW‘, //多語系設置,目前只有三種:zh_CN zh_TW en_US

OnUploadImageSuccess: function (res) {//文件上傳成功返回值,返回值格式{State:"",Message:"",JsonData:""}

alert(res.JsonData + ‘上传成功!‘);

}

});

});

显示模式

$(document).ready(function () {

$(‘#LOGO_PHOTO‘).DragAndClick({

IsShow: true,

Height: ‘230‘,

Width: ‘230‘,

FilePath: ‘http://localhost:336/Attachment/‘ + ‘test.jpg‘,//示例顯示圖片

Language: ‘zh_TW‘, //多語系設置,目前只有三種:zh_CN zh_TW en_US

});

});

如果需要和我一起完善这个控件的,可以联系我:QQ284362096

后边我会放置到OSCHINA GIT 上,欢迎一起分享。

控件DEMO秀:

时间: 2024-08-29 10:14:30

觉得蛋疼的上传控件的相关文章

如何清空文件上传控件里的选定文件(路径)

我又来扯鸡毛蒜皮了.有名言曰人生短得不够扯鸡毛蒜皮,但我的工作就是由无数的鸡毛蒜皮组成,如之奈何? 今天的鸡毛和蒜皮是:如何清空文件上传控件里的选定文件(路径)? 场景是酱紫的: 有一个上传控件和一个按钮,其中上传控件隐藏.点击按钮,触发上传控件点击事件,于是弹出文件选择对话框:选好文件后,于是触发了上传控件的onchange事件.在这个事件里,将文件上传. 有点装逼,就是隐藏了上传控件.这可能是出于界面简约的考虑.问题是,同一个文件不能连续上传2次,因为路径不变,没有触发onchange事件.

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

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

在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件

在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件 引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过"我现在可以通过WebBrowser实现对各种Html元素的操控,唯独无法控制Html的上传控件",出于安全原因,IE没有对上传控件提供操控支持,这使得我们没法像控制其他控件一样用简单的代码进行赋值. 比较实际的解决方案就是模拟操作了,下面我就将演示

ASP.NET使用文件上传控件上传图片

ASPX代码 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

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

总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = function(){ alert(getFullPath(this)) } function getFullPath(obj){ if(!obj){return;} if(!-[1,]){obj.select();return document.selection.createRange().text;} r

百度Ueditor多图片上传控件

发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面中添加对ueditor的脚本引用 <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../public/ue

上传控件显示缩略图

在网站程序中,经常会需要进行图片的上传,很多时候我们也需要在选择图片后将选择的图片作为缩略图显示在页面上,可以直接在页面上查看选择的是否是自己想要的图片或图片是否选择错误.以往通常的做法事先将图片上传到网站程序目录中,然后再把图片的网站图径给Image控件.这样做会有个弊端,那就是如果我选择的图怎不是想要的,想重新选择一经图片,那我岂不是要把之前上传的删了.很显示这样有些多此一举.有人可能会问为什么我们在选择图片后不直接把上传控件上的路径给Image控件呢?因为此时你的图片路径是本地路径,比如D

改变FileUpload文件上传控件的显示方式,确认后上传

一.Aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUploadDemo.aspx.cs" Inherits="WebApplication1.FileUploadDemo" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu

jquery文件上传控件 Uploadify

(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图