之前一直写过KindeEditor中的小控件作为单独上次,但业务要求需要另一种方式

现在改用ajaxfileupload.js试试,这个一百度

一.首页引用

<script src="~/Scripts/ajaxfileupload.js"></script>

原理:创建隐藏的表单和iframe然后用JS去提交,获得返回值。

注意:使用AjaxFileUpload插件上传文件可不需要form,如下:

<form name="form" action="" method="POST" enctype="multipart/form-data"> 
……相关html代码…… 
</form> 
因为AjaxFileUpload插件会自动生成一个form提交表单。

对于file文件域ID和name,ajaxFileUpload插件fileElementId参数需要获取文件域ID,如果处理上传文件操作就需要知道文件域name,以便获取上传文件信息,这两者关系一定要清楚。

使用

 var cz = parseInt($('#tj').val());
var json = {};
var sx = new Array();
json["bt"] = $('#bt').val();
json["lx"] = parseInt($('#lx').attr("data-id"));
json["bbid"] = parseInt($('#bbid').attr("data-id"));
json["pid"] = parseInt($('#pid').attr("data-id"));
json["gnbh"] = $('#gnbh').val();
json["cz"] = cz;
for (i = ; i < $(".template_details .color .clearfix").length; i++) {
var s = {};
s["sm"]=$(".template_details .color .clearfix").eq(i).find('span').eq().text();
s["sz"] = $(".template_details .color .clearfix").eq(i).find('span').eq().text();
s["css"] = $(".template_details .color .clearfix").eq(i).find('span').eq().text();
sx[i] = s;
}
json["sx"] = sx;
$.ajaxFileUpload({
type: "post", //请求类型:post或get,当要使用data提交自定义参数时一定要设置为post
url: "/Web/addmb", //文件上传的服务器端请求地址
secureuri: false, //是否启用安全提交,一般默认为false就行,不用特殊处理
fileElementId: "filePicture", //文件上传控件的id <input type="file" id="filePicture" name="filePicture" accept=".jpg,.jpeg,.png,.bmp" onchange="filePictureChange()" />
dataType: "JSON", //返回值类型,一般设置为json,还支持html\xml\script类型
data: { json: encodeURIComponent(JSON.stringify(json)) },//用于post请求提交自定义参数
success: function (data) { //服务器成功响应处理函数
var gg = $.parseJSON(data);
if (gg.yz) {
alert("添加成功");
$('.template_details').hide();
mbcx();
}
else
{
alert("添加失败");
}
}
});

二.后台

.net写法

                    HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
moban a = new moban();
string imgPath = "";
if (hfc[].FileName != "")
{
//===================图片保存
var filename = hfc[].FileName.Substring(hfc[].FileName.LastIndexOf(".") + );//取得后缀

var str = "gif|jpg|jpeg|png|GIF|JPG|PNG";
if (str.IndexOf(filename) > -1)
{
filename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + filename;
imgPath = "../img/lunbotu/" + filename;
var del = Server.MapPath("../img/lunbotu/" + zt);
string PhysicalPath = Server.MapPath(imgPath);
hfc[0].SaveAs(PhysicalPath);
//======================图片保存
jdlbttp a = db.jdlbttp.FirstOrDefault(u => u.id == cxid);//查询到对应id
a.name = bt;
a.tp = filename;
db.Entry(a).State = System.Data.Entity.EntityState.Modified; //什么更新???
System.IO.File.Delete(del); //删除旧照片
db.SaveChanges();
array["yz"] = true;
}else
{
array["yz3"] = false;
}

                        }

图片上传插件用法,net语法【二】的更多相关文章

  1. 图片上传插件用法,JS语法【三】

    注意点: 作为文件域(<input type="file">)必须要有name属性,如果没有name属性,上传之后服务器是获取不到图片的.如:正确的写法是<inp ...

  2. KindeEditor图片上传插件用法

    因业务需要找了款插件 KindeEditor编辑器确认挺好用,但无奈技术有限,上传配置不知,故问度娘! 图片上传对于部分新手来说有时候是一件非常头疼的事,今天来分享一下项目中使用到的这个插件Kinde ...

  3. jquery uploadify文件上传插件用法精析

      jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...

  4. Jquery自定义图片上传插件

    1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...

  5. Aps.net中基于bootstrapt图片上传插件的应用

    Aps.net中基于bootstrapt图片上传插件的应用 在最近的项目中需要使用一个图片上传的功能,而且是多张图片同时上传到服务器的文件夹中,将图片路径存放在数据库中.为了外观好看使用了bootst ...

  6. ssm项目中KindEditor的图片上传插件,浏览器兼容性问题

    解决办法: 原因:使用@ResponseBody注解返回java对象,在浏览器中是Content-Type:application/json;charset=UTF-8 我们需要返回字符串(Strin ...

  7. ueditor图片上传插件的使用

    在项目里使用到ueditor图片上传插件,以前图片上传都是直接使用js代码直接上传图片,比较麻烦,而且效率也比较低,而ueditor这款插件完美的解决了这个问题,这个是百度开发的一款富文本编辑器,在这 ...

  8. WebUploader文件图片上传插件的使用

    最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家 需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...

  9. kindeditor 图片上传插件

    富文本编辑器,kindeditor是比较好用的一款.需要的功能都有,文档.demo也详细.有什么功能去官网看一眼就好. 官网:http://kindeditor.net/ 一些好用的如图片上传,kin ...

随机推荐

  1. Debian 7.1设置中文环境

    之前在Chinaunix上看过一个人写过博客,是关于介绍Debian设置中文环境的,在这里我针对Debian 7来补全一下. Debian是非常经典而优秀的Linux发行版了,Debian是个很大的家 ...

  2. IOS学习之路五(SpriteKit 开发飞机大战小游戏一)

    参考SpriteKit 创建游戏的教程今天自己动手做了一下,现在记录一下自己怎么做的,今天之做了第一步,一共有三个部分. 第一步,项目搭建. 项目所用图片资源:点击打开链接 1.在Xcode打开之后, ...

  3. python-igraph on windows10 64bit

    igraph安装记录: 在http://www.lfd.uci.edu/~gohlke/pythonlibs/找到对应版本的python-igraph 这里是anaconda的python2.7.11 ...

  4. django model Foreign key usage 关系型数据库 ORM

    django 的模型 from django.db import models""" A model pair to map car and its manufactur ...

  5. [Android开发常见问题-12] Android开发中debug.keystore如何使用。

    有些团度在开发较大的项目的时候会用到debug.keystore这种debug签名,那么这个东西怎么用呢?之前在导出签名包的时候只需要android tools -> export signed ...

  6. day7 面向对象编程

    编程范式 编程是程序员用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程,一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大路通罗马,实现一个任务的方式有很多种 ...

  7. 移动收入超PC端 盛大文学战略转型初见成效

    随着智能手机和平板电脑的普及,越来越多的互联网服务也开始向移动端拓展,除了传统的互联网服务如搜索.即时通信之外,网络文学这项新兴的互联网业务也没忽视对移动端的布局. 7月9日,中国最大的网络文学出版平 ...

  8. get post 知多少

    GET与POST简介 POST和GET都属于http请求的方法,所以都包含开始行,头域,头域结束符,消息主体,但是,他们同样存在很多异同,为了更好的区别这两种请求,我们对他们的异同进行具体的分析. 表 ...

  9. java布尔值进行and和or逻辑运算原理

    先看看如下代码: public class Test { public static void test() { boolean a = true; boolean b = false; if (a ...

  10. js面向对象小结(工厂模式,构造函数,原型方法,继承)

    最近过了一遍尼古拉斯泽卡斯的高级程序设计第三版(红皮书)第六章:面向对象程序设计,现在把总结出来的东西和大家分享一下. 主要内容如下: 1.工厂模式 2.构造函数模式 3.原型模式 4.继承 一.工厂 ...