注意点:

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

dataType参数一定要大写。如:dataType: 'HTML'

一.html

<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

二.js

  <script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
ajaxFileUpload();
})
})
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/upload.aspx', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议,一般设置为false
fileElementId: 'file1', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
$("#img1").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}
</script>

三.后台

 protected void Page_Load(object sender, EventArgs e)
{
HttpFileCollection files = Request.Files;
string msg = string.Empty;
string error = string.Empty;
string imgurl;
if (files.Count > )
{
files[].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[].FileName));
msg = " 成功! 文件大小为:" + files[].ContentLength;
imgurl = "/" + files[].FileName;
string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
Response.Write(res);
Response.End();
}
}

四.JS前台页面判断文件内容大小

 function change() {
$('.imgupload').off("change"); //先关闭一次change
$('.imgupload').on("change", "#filePicture", function () {
var bool = testMaxSize(this.files[]); //调用方法
if (bool) {
$("#zt").text("移入可预览文件");
var files = window.URL.createObjectURL(this.files[]);
$('.laye_img').attr("src", files);
} else {
alert("图片大小超过限制,请上传小于1M体积!");
$("#zt").text("选择上传图片");
$('.laye_img').attr("src", "");
}
imgfloat()//调用
})
}
  //判断图片大小
function testMaxSize(file) {
if (file) {
var fileData = file;
var size = fileData.size; //注意,这里读到的是字节数
maxSize = ; //转化为字节
if (size <= maxSize) {
return true;
} else {
return false; }
}
}

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

  1. 图片上传插件用法,net语法【二】

    之前一直写过KindeEditor中的小控件作为单独上次,但业务要求需要另一种方式 现在改用ajaxfileupload.js试试,这个一百度 一.首页引用 <script src=" ...

  2. KindeEditor图片上传插件用法

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. kindeditor 图片上传插件

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

随机推荐

  1. Linux (Centos)操作MySql命令

    1.安装MySql服务端命令: yum install mysql-server yum install mysql-devel 2.安装MySql客户端 yum install mysql 3.启动 ...

  2. 将一个tabel加到另一个table

    DataTable rate = GetRate(str_catchType,); dt.Merge(rate);//将两个table合并

  3. opengl之vsh、fsh简易介绍+cocos2dx 3.0 shader 变灰

    认识着色器 理解OpenGL渲染管线,对于学习OpenGL非常重要.下面是OpenGL渲染管线的示意图:(图中淡蓝色区域是可以编程的阶段) 此图是从wiki中拿过来的,OpenGL的渲染管线主要包括: ...

  4. Vue 学习笔记 -- inline-template

    简书 更方便的使用私有子组件 定义一个私有子组件时,如果子组件的template过长会使得代码非常难以阅读 这时可以使用内联模版 但是如果写成这样 为毛用要子组件呢?

  5. C#中的参数和调用方式(可选参数、具名参数、可空参数)

    具名参数 和 可选参数 是 C# framework 4.0 出来的新特性. 一. 常规方法定义及调用 public void Demo1(string x, int y) { //do someth ...

  6. 比起Windows,怎样解读Linux的文件系统与目录结构?

    比起Windows,怎样解读Linux的文件系统与目录结构? Linux 和Windows的文件系统有些不同,在学习使用 Linux 之前,若能够了解这些不同,会有助于后续学习. 本文先对Window ...

  7. 智能合约语言 Solidity 教程系列10 - 完全理解函数修改器

    这是Solidity教程系列文章第10篇,带大家完全理解Solidity的函数修改器. Solidity系列完整的文章列表请查看分类-Solidity. 写在前面 Solidity 是以太坊智能合约编 ...

  8. bzoj4516: [Sdoi2016]生成魔咒 sam

    题意:每次插入一个数字,查询本质不同的子串有多少个 题解:sam,数字很大,ch数组用map来存,每次ins之后查询一下新建点表示多少个本质不同的子串(l[np]-l[fa[np]]) /****** ...

  9. Python实现创建字典

    编写一个名为 make_album() 的函数,它创建一个描述音乐专辑的字典.1.这个函数应接受歌手的名字和专辑名,并返回一个包含这两项信息的字典.使用这个函数创建三个表示不同专辑的字典,并打印每个返 ...

  10. Hbase(一)基础知识

    一.Hbase数据库介绍 1.简介 HBase 是 BigTable 的开源 java 版本.是建立在 HDFS 之上,提供高可靠性.高性能.列存储. 可伸缩.实时读写 NoSQL 的数据库系统. N ...