图片上传插件用法,JS语法【三】
2024-08-21 12:54:35
注意点:
作为文件域(<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; }
}
}
最新文章
- 为select 设置样式
- oracle RAC切换归档
- jquery之右下角消息提示框
- js判断函数是否存在、判断是否为函数
- spring 缓存(spring自带Cache)(入门)源码解读
- 编程实现linux下的shell
- 团体程序设计天梯赛-练习集L1-005. 考试座位号
- jquery与后台相互传递中文参数乱码
- Android基于WIFI实现电脑和手机间数据传输的技术方案研究
- 线程间使用socket通信的计算器
- NET Platform Standard
- LoadRunner 中实现MD5加密
- del_cursor 批量删除游标
- Python使用filetype精确判断文件类型 (文件类型获取)
- js去除字符串中的标签
- Python2.7-re模块
- python---redis管道(事务)和发布订阅
- Android 9 patch 图片 (.9.png 格式图片) 的特点和制作(转)
- mongodb的学习-5-概念解析
- python的IDLE界面回退代码语句