jq upload图片上传代码

/*
* 图片上传
* */
function postImgData() {
$("#addFileInfo input[name=‘file‘]").change(function () {
console.log($(this).val())
if (!$(this).val()) {
return
}
var fileTyle = $(this).val().split(".");
console.log(fileTyle);
if (fileTyle[1] !== "png" && fileTyle[1] !== "jpg" && fileTyle[1] !== "jpeg" && fileTyle[1] !== "PNG" &&
fileTyle[1] !== "JPG" && fileTyle[1] !== "JPEG"
) {
alert("只允许上传‘png(PNG)‘、‘jpg(JPG)‘、‘jpeg(JPEG)‘格式的图片");
return;
} else {
console.log(123);
$("#addFileInfo").ajaxSubmit({
type: ‘post‘,
url: ‘/uploadFilePath‘,
success: function (data) {
console.log(data);
$(".webuploader-pick i").hide();
$(".webuploader-pick img").hide();
if (data.status == 0) {
alert("请上传头像");
return;
}
// console.log(typeof data);
// var urls = JSON.parse(data.filepath);
// console.log(urls);
// var fontUrl = urls.filepath.url;
if(typeof data===‘string‘){
var urls = JSON.parse(data);
}else {
var urls = data;
}
var fontUrl = urls.filepath.url;
console.log(fontUrl);
$("#avatar").val(fontUrl);
$("#crop_preview").attr("src", tools.baseImgUrl() + fontUrl).fadeIn(500);
$(".head_msg").fadeOut(500);
$("#preview_box .iconfont").fadeOut(500);
var i = 0;
$("#crop_preview").load(function () {
if (i > 0) {
jcrop_api.destroy();
}
i++;
var w = $("#crop_preview").width(), h = $("#crop_preview").height();
$("#crop_preview").removeAttr("style")
if (w >= 180 || h >= 150) {
if (w > h) {

$("#crop_preview").css("width", "180px");
h = $("#crop_preview").height();
w = 180;
} else {
$("#crop_preview").css("height", "150px");
w = $("#crop_preview").width();
h = 150;
}
}
});
$(".pic_cont h2").hide();
var imgUrl = fontUrl;
console.log(imgUrl)
customers(imgUrl)
},
error: function (XmlHttpRequest, textStatus, errorThrown) {

//为测试原生ie9
}
});
}
})
customers();
}

时间: 2024-10-26 21:49:08

jq upload图片上传代码的相关文章

图片上传代码

client页面上传到上传到服务器并且在服务器保存 xhtml页面 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

php图片上传代码

<?php // 连接数据库 $conn[email protected]mysql_connect("localhost","root","") or die(mysql_error()); @mysql_select_db('water',$conn) or die(mysql_error()); // 判断action $action = isset($_REQUEST['action'])? $_REQUEST['action']

jQuery File Upload 图片上传解决方案兼容IE6+

1.下载:https://github.com/blueimp/jQuery-File-Upload 2.命令: npm install bower install ====================== 3.修改basic.html 如下: 1.cdn 静态引用修改 2.ajax提交路径修改 ====&&& 其他demo页面修改同理 =======: 下面修改完了以后.如下所示: <!DOCTYPE HTML><!--/* * jQuery File Up

AppCan做的图片上传代码

存在AppCan里的网页 index.html <!DOCTYPE html> <html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px"> <head> <title></title> <meta charset="utf-8"> <

转载图片上传预览 代码

1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conte

Jquery之图片上传

HTML: <a id="upload">图片上传</a> <img src="" style="width:50px;height:50px;display:none;" id="imgView"/> <input type="file" name="uploadFile" id="uploadFile" style=&qu

图片上传根据stream生成image

对于图片上传代码的整合 因为需要判断上传的图片的宽高是否符合尺寸,所以在最初拿到inputstream的时候,就直接获取image格式的图片 本来是想在下面的checkFile中获取的,不过直接使用System.Drawing.Image.FromStream(request.PostedFile.InputStream);的时候报错了,错误意思是说参数为空,应该是由于上面获取byte[]file的时候,关闭了stream,导致request.PostFile.InputStream也没有了,所

php 使用 wangeditor3 图片上传

就在最近,公司让我写一个后台,其中用到了富文本编辑器.自从这个富文本的出现 我就慢慢的进入了一个坑,起初不知道用什么编辑器好,看了好多好多,最后选择了.这个 wangeditor3.个人认为这个富文本很干净,还很多功能. 选择了编辑器 我就慢慢的走进了坑的道理,一步一个坎.接下来就是看代码了. 这个是wangeditor,选择一个自己喜欢的版本.我用的是3的 https://github.com/wangfupeng1988/wangEditor/releases 定义一个富文本编辑器 然后富文

spring mvc 图片上传,图片压缩、跨域解决、 按天生成目录 ,删除,限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成目录 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE be