uploadfy 图片/视频上传
JS引入
<link href="../../Scripts/uploadify/uploadify.css" rel="stylesheet" />
<script src="../../Scripts/uploadify/jquery.uploadify.js" type="text/javascript"></script>
html
<tr>
<td align="left" class="tdTextValue">图片:</td>
<td align="left" class="tdDataValue">
<input name="file_upload" type="file" id="file_upload" value="" />
<input id="PicList" name="PicList" type="hidden" />
<ul class="picUpList2" id="preview">
</ul>
</td>
</tr>
<tr>
<td align="left" class="tdTextValue">视频:</td>
<td align="left" class="tdDataValue">
<input name="file_upload1" type="file" id="file_upload1" value="" />
<input id="PicList1" name="PicList1" type="hidden" />
<ul class="picUpList2" id="preview1">
</ul>
</td>
</tr>
JS代码
<script language="javascript" type="text/javascript">
$(function () {
uploadify();
uploadify1();
});
//上传图片
function uploadify() {
$("#preview").html("");
$("#file_upload").uploadify({
uploader: '/Json/UploadHandler.ashx',
swf: '/Scripts/uploadify/uploadify.swf',
folder: '/UploadFiles/Images',
buttonText: "添加文件",
height: 24,
width: 70,
multi: false,
//uploadLimit: 1,
fileTypeExts: "*.jpg;*.png;*.gif;*.bmp",
fileTypeDesc: "选择图片",
onFallback: function () {
alert("您未安装FLASH控件,无法上传!请安装FLASH控件后再试。");
},
onUploadSuccess: function (file, data, response) {
$("#preview").html("");
var DataJson = JSON.parse(data);
$("<li><img width=\"80\" height=\"80\" src=\"" + DataJson.FilePath.replace("~", "") + "\"><a class=\"delIcon1\" onclick=\"RemoveImg(this)\" href=\"javascript:void(0);\"></a></li>").appendTo($("#preview"));
if ($("#PicList").val() == "" || $("#PicList").val() == null) {
$("#PicList").val(DataJson.FilePath.replace("~", ""));
} else {
$("#PicList").val(DataJson.FilePath.replace("~", ""));
}
}
});
}
function RemoveImg(obj) {
if (confirm("确认删除此图片吗?")) {
getAjax("/Json/UploadHandler.ashx", { DelfileName: $(obj).prev().attr("src") }, function (data) {
var JsonData = eval("(" + data + ")");
if (JsonData.Code == "1") {
$("#PicList").val($("#PicList").val().replace($(obj).prev().attr("src"), ""));
var _preview = "<li><img width=\"80\" height=\"80\" src=\"" + $(obj).prev().attr("src") + "\"><a class=\"delIcon1\" onclick=\"RemoveImg(this)\" href=\"javascript:void(0);\"></a></li>";
$("#preview").html($("#preview").html().replace(_preview, ""));
alert("图片删除成功!");
}
else if (JsonData.Code == "-1") {
alert(JsonData.Message);
return;
}
else {
$("#PicList").val($("#PicList").val().replace($(obj).prev().attr("src"), ""));
var _preview = "<li><img width=\"80\" height=\"80\" src=\"" + $(obj).prev().attr("src") + "\"><a class=\"delIcon1\" onclick=\"RemoveImg(this)\" href=\"javascript:void(0);\"></a></li>";
$("#preview").html($("#preview").html().replace(_preview, ""));
alert("没找到相应文件,图片删除失败!");
return;
}
});
}
}
//上传视频
function uploadify1() {
$("#preview1").html("");
$("#file_upload1").uploadify({
uploader: '/Json/UploadHandler.ashx',
swf: '/Scripts/uploadify/uploadify.swf',
folder: '/UploadFiles/Images',
buttonText: "添加文件",
height: 24,
width: 70,
//multi: false,
//uploadLimit: 1,
fileSizeLimit: 0,
fileTypeExts: "*.flv;*.mp4",
fileTypeDesc: "选择视频",
onFallback: function () {
alert("您未安装FLASH控件,无法上传!请安装FLASH控件后再试。");
},
onUploadSuccess: function (file, data, response) {
$("#preview1").html("");
var DataJson = JSON.parse(data);
$("<li><span>" + DataJson.filename + "</span><a class=\"delIcon2\" onclick=\"RemoveImg1('" + DataJson.filename + "')\" href=\"javascript:void(0);\"></a></li>").appendTo($("#preview1"));
;
if ($("#PicList1").val() == "" || $("#PicList1").val() == null) {
$("#PicList1").val(DataJson.filename + ",");
} else {
$("#PicList1").val($("#PicList1").val() + DataJson.filename + ",");
}
}
});
}
function RemoveImg1(name) {
if (confirm("确认删除此视频文件吗?")) {
getAjax("/Json/UploadHandler.ashx", { DelfileName: "/UploadFiles/Images/" + name }, function (data) {
var JsonData = eval("(" + data + ")");
if (JsonData.Code == "1") {
$("#PicList1").val($("#PicList1").val().replace(name + ",", ""));
var _preview1 = "<li><span>" + name + "</span><a class=\"delIcon2\" onclick=\"RemoveImg1('" + name + "')\" href=\"javascript:void(0);\"></a></li>";
$("#preview1").html($("#preview1").html().replace(_preview1,""));
alert("视频删除成功!");
}
else if (JsonData.Code == "-1") {
alert(JsonData.Message);
return;
}
else {
$("#PicList1").val($("#PicList1").val().replace(name + ",", ""));
var _preview1 = "<li><span>" + name + "</span><a class=\"delIcon2\" onclick=\"RemoveImg1('" + name + "')\" href=\"javascript:void(0);\"></a></li>";
$("#preview1").html($("#preview1").html().replace(_preview1, ""));
alert("没找到相应文件,视频删除失败!");
return;
}
});
}
}
</script>
后台代码(我用的是一般处理程序文件)
public class UploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
string fileName = context.Request.Form["DelfileName"] == null ? "" : context.Request.Form["DelfileName"].ToString();
if (fileName != "") //删除图片
{
string virtualPath = string.Format("~{0}", fileName);
string strPath = HttpContext.Current.Server.MapPath(virtualPath);
string strJson = "";
try
{
if (!System.IO.File.Exists(strPath))
{
strJson = "{ \"Success\":false, \"Code\":\"-2\", \"Message\":\"没找到相应文件,图片删除失败!\" }";
}
else
{
System.IO.File.Delete(strPath);
strJson = " { \"Success\":true, \"Code\":\"1\", \"Message\":\"图片删除成功!\" }";
}
}
catch (Exception ex)
{
strJson = "{ \"Success\":false, \"Code\":\"-1\", \"Message\":\"操作失败:\" " + ex.Message + " }";
}
context.Response.Write(strJson);
}
else
{
HttpPostedFile file = context.Request.Files["Filedata"];
string uploadPath = HttpContext.Current.Server.MapPath("/UploadFiles/Images/") + "\\";
if (file != null)
{
string fileNameExit = file.FileName.Substring(file.FileName.LastIndexOf(".")).ToLower();
string strFileName = getFileName() + fileNameExit;
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
file.SaveAs(uploadPath + strFileName);
string saveFile = uploadPath + strFileName;
string virtualPath = string.Format("~/UploadFiles/Images/{0}", strFileName);
string strJson = "{\"filename\":\"" + strFileName + "\",\"FilePath\":\"" + virtualPath + "\"}";
if (!(CheckTextFile(saveFile) == FileExtension.PNG || CheckTextFile(saveFile) == FileExtension.BMP || CheckTextFile(saveFile) == FileExtension.GIF || CheckTextFile(saveFile) == FileExtension.JPG || CheckTextFile(saveFile) == FileExtension.filelist || CheckTextFile(saveFile) == FileExtension.filexlist || CheckTextFile(saveFile) == FileExtension.rar || CheckTextFile(saveFile) == FileExtension.pdf || CheckTextFile(saveFile) == FileExtension.mp4 || CheckTextFile(saveFile) == FileExtension.flv))
{
File.Delete(saveFile);
strJson = "{\"filename\":\"\",\"FilePath\":\"\"}"; //扩展名不对
}
context.Response.Write(strJson);
}
else
{
//context.Response.Write("0");
context.Response.Write("{\"filename\":\"\",\"FilePath\":\"\"}");
}
}
}
//删除图片
public void DeleteUploadFile(HttpContext context,string fileName)
{
}
/// <summary>
/// 得到随机的文件名
/// </summary>
/// <returns></returns>
public static string getFileName()
{
Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff"));
serial.Append(rd.Next(0, 9999).ToString());
return serial.ToString();
}
public static FileExtension CheckTextFile(string fileName)
{
FileStream fs = new FileStream(fileName, FileMode.Open, FileAccess.Read);
System.IO.BinaryReader br = new System.IO.BinaryReader(fs);
string fileType = string.Empty; ;
try
{
byte data = br.ReadByte();
fileType += data.ToString();
data = br.ReadByte();
fileType += data.ToString();
FileExtension extension;
try
{
extension = (FileExtension)Enum.Parse(typeof(FileExtension), fileType);
}
catch
{
extension = FileExtension.VALIDFILE;
}
return extension;
}
catch (Exception ex)
{
return FileExtension.VALIDFILE;
}
finally
{
if (fs != null)
{
fs.Close();
br.Close();
}
}
}
public enum FileExtension
{
JPG = 255216,
GIF = 7173,
PNG = 13780,
BMP = 6677,
rar = 8297,
pdf = 3780,
filelist = 208207,//xls.doc.ppt
filexlist = 8075, //xlsx,zip,pptx,docx,mmap,zip
flv = 7076,
mp4 = 00,
//apk = 8075,
//SWF = 6787,
//ZIP = 8075,
//_7Z = 55122,
VALIDFILE = 9999999
// 255216 jpg;
// 7173 gif;
// 6677 bmp,
// 13780 png;
// 6787 swf
// 7790 exe dll,
// 55122 7z
// 6063 xml
// 6033 html
// 239187 aspx
// 117115 cs
// 119105 js
// 102100 txt
// 255254 sql
}
public bool IsReusable
{
get
{
return false;
}
}
}
uploadfy 图片/视频上传的更多相关文章
- iOS实现视频和图片的上传
关于iOS如何实现视频和图片的上传, 我们先理清下思路 思路: #1. 如何获取图片? #2. 如何获取视频? #3. 如何把图片存到缓存路径中? #4. 如何把视频存到缓存路径中? #5. 如何上传 ...
- Thinkphp5图片上传正常,音频和视频上传失败的原因及解决
Thinkphp5图片上传正常,音频和视频上传失败的原因及解决 一.总结 一句话总结:php中默认限制了上传文件的大小为2M,查找错误的时候百度,且根据错误提示来查找错误. 我的实际问题是: 我的表单 ...
- uni-app实现图片和视频上传功能
使用uni-app实现点击上传,既可以上传视频,有可以上传图片,图片预览,删除图片和视频功能,最终效果如下.uni-app里面没有提供同时上传视频和图片这个插件,只能靠自己手写, 1.页面布局 通过 ...
- FileReader与URL.createObjectURL实现图片、视频上传前预览
之前做图片.视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览.实际上这只是文件“上传后再预览”,这既浪 ...
- 微信小程序选择视频,视频上传,视频播放
请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobje ...
- ecshop二次开发之视频上传
1.前台展示效果: 2.后台展示效果: 3.代码实现: 后台实现过程: 1.在languages/zh_cn/admin/goods.PHP中插入 $_LANG['tab_video'] = '视频上 ...
- ASP.NET MVC+LayUI视频上传
前言: 前段时间在使用APS.NET MVC+LayUI做视频上传功能的时,发现当上传一些内存比较大的视频就会提示上传失败,后来通过查阅相关资料发现.NET MVC框架为考虑安全问题,在运行时对请求的 ...
- asp.net实现图片在线上传并在线裁剪
1.说明 接上一篇文章uploadify实现多附件上传完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,就是文旺老兄写的这篇Asp.Net平台下的图片在线裁 ...
- 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
随机推荐
- 集合基本操作 Python DAY2
集合本身具有两个特性 1.去重 2.关系测试 列表转集合的两种写法: list_1=[1,2,3,4,1,2,7,8,] list_1=set(list_1) #方法二 list_2=set([1, ...
- Python 进度条原理
#进度条原理 import sys,time for i in range(50): sys.stdout.write("#")#标准输出 #若不能够按照时间一个一个依次显示,则代 ...
- 嵌套if-esle语句
C语言自学之嵌套if-esle语句 Dome : 获奖条件为年销售业绩100万以上,并且入职满两年的员工.小明进入公司1年,销售业绩为120万. 在代码编辑器中使用嵌套if-else语句判断小明是否有 ...
- Android CmakeList
https://www.cnblogs.com/chenxibobo/p/7678389.html
- vue中的keep-alive
本文转载于:https://blog.csdn.net/xum222222/article/details/80322532 转载仅供个人日后学习 https://www.cnblogs.com/ji ...
- 《Hello world 团队》第二次作业:团队项目选题报告
项目 内容 这个作业属于哪个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验六 团队作业2:团队项目选题 团队名称 <hello--world团队> ...
- Azkaban启动web--javax.net.ssl.SSLException: Unrecognized SSL message, plaintext connection? at sun.se
javax.net.ssl.SSLException: Unrecognized SSL message, plaintext connection? at sun.se javax.net.ssl. ...
- F7+vue 物理返回键监听使用
以前使用的是纯F7,这个项目加了Vue进去,但碰到了一个问题,就是这样监听不到安卓物理键的返回,它是点击返回,直接推出程序,这个坑有点深,查了不少资料也问了不少人,最后在网上看到了别人的写的,自己也改 ...
- 浅谈redis的HyperLogLog与布隆过滤器
首先,HyperLogLog与布隆过滤器都是针对大数据统计存储应用场景下的知名算法. HyperLogLog是在大数据的情况下关于数据基数的空间复杂度优化实现,布隆过滤器是在大数据情况下关于检索一个元 ...
- 阿里巴巴开源项目汇总-(JAVA)
来源:https://segmentfault.com/a/1190000017346799 1.分布式应用服务开发的一站式解决方案 Spring Cloud Alibaba Spring Cloud ...