js实现上传图片 文字 （全步骤）
## 之前写过pc项目 也用过 http://www.uploadify.com/
在一次写pc项目感觉不是自己想要的后面通过js实现图片文字上传
http://www.uploadify.com/ 这个插件也不错 看个人喜欢吧
### 下面是我的效果图 复制代码就能用 用jq+jqForm实现
以下是代码：不对之处请指出，谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片上传</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<style lang="scss">
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="layout">
<form id="actPostInfos" enctype="multipart/form-data" name="actPostInfos">
<div class="lay-content">
<div class="lay_img_count">
<div class="l_img_logo">
<!-- 默认加载的图片 -->
<img id="previewImg"
class="banner-img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=847657516,2498762978&fm=27&gp=0.jpg"
alt="默认图片" width="200" height="200"/>
</div>
<p style="color:red">建议尺寸：300*300 , 图片大小不能超过1M , 支持png , jpg等格式</p>
<input name="file" id="albumFile" type="file" hidden="hidden" accept="image/*" />
</div>
<div class="lay_img_counts clearfloat">
<span class="lay-visiblity">点击按钮上传图片:</span>
<button id="chooseBannerImgBtn" style="width:60px;height:30px;background-color:orange;outline:none;border:none;
color:#fff;">上传logo</button>
</div>
<div class="lay_club_profile" style="min-height:200px;margin-top:10px;position:relative">
<span style="position:absolute;top:0;">请输入上传内容: </span>
<textarea id="infoList" style="position:absolute;left:140px;max-height:200px;max-width:300px;outline:none;"
name="" rows="10" cols="500" placeholder="请输入提交到服务器的内容" maxlength="100"></textarea>
</div>
<div class="lay_club_bottom" style="width:50px;height:30px;background-color:pink;">
<button id="saveClubForm" style="width:100%;height:100%;background-color:pink;">保存</button>
</div>
</div>
</form>
</div>
</body>
</html>
<script>
/**
* 需求：进入页面时如果页面数据为空时 可以上传图片 文字到后台
* 页面有数据时 如果修改（不修改）图片时传给后台一个标志
*
*/
$(function(){
// 初始页面时把后台图片保存
var clubLogoUrls = '';
// 检测上传图片的大小
$("#albumFile").change(function() {
var albumFile = document.getElementById("albumFile").value.toLowerCase().split('.'); //以“.”分隔上传文件字符串
var $file = $(this);
if(document.actPostInfos.albumFile.value == "") {
alert( '图片不能为空！'
);
$("#albumFile").val("");
// 从新设置默认图片
$("#previewImg").attr("src", "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=847657516,2498762978&fm=27&gp=0.jpg")
return false;
} else {
var albumFileType = albumFile[albumFile.length - 1];
// 判断图片格式
if(albumFileType == 'gif' || albumFileType == 'jpg' || albumFileType == 'bmp' ||
albumFileType == 'png' || albumFileType == 'jpeg') {
var albumFileSize = document.getElementById("albumFile").files[0].size;
// 大于1M
if(albumFileSize > 1024*1024*1) { // 1024*1024*1
alert('图片不能大于1M, 请重新选择 !');
$("#albumFile").val("");
// 如果图片大于设定尺寸 请重新☑️
$("#previewImg").attr("src", "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=847657516,2498762978&fm=27&gp=0.jpg")
return false;
} else {
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#previewImg");
if(fileObj && fileObj.files && fileObj.files[0]) {
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src', dataURL);
} else {
dataURL = $file.val();
var imgObj = document.getElementById("previewImg");
// 两个坑:
// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
}
}
return true;
} else {
//jpg和jpeg格式是一样的只是系统Windows认jpg，Mac OS认jpeg，二者区别自行百度
alert('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片')
$("#albumFile").val("");
$("#previewImg").attr("src", "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=847657516,2498762978&fm=27&gp=0.jpg")
return false;
}
}
});
// 选择上传图片
$("#chooseBannerImgBtn").click(function(e) {
e.preventDefault(); // *注意这里不能触发change事件 只有click事件
$("#albumFile").trigger("click"); // 触发到文件选择
});
// 提交按钮操作
$("#saveClubForm").click(function(e){
e.preventDefault();
var albumFile = document.getElementById("albumFile").value.toLowerCase().split('.'); //以“.”分隔上传文件字符串
/**
* 在这里我们src路径与别人不同 eg: http://lurenhong.top/love?fileName=enjf2jcns.jpg
* 通过在图片src中查找 fileName 如果找不到就提示上传图片不能为空
*/
// 在这里默认图片的一段字符作为查找对象 如果找不到就认为没有图片 提示用户上传图片
var album_default = '847657516'
if (!albumFile && !$("#previewImg").attr("src").indexOf("fileName") > -1 || $("#previewImg").attr("src").indexOf(album_default) > -1){
alert('上传图片不能为空');
return false;
}else if (!$("#infoList").val()){
alert('上传内容不能为空');
return false;
}
// 未防治网络请求原因 点击保存时禁用按钮 防止多次提交表单
$("#saveClubForm").attr("disabled", true);
$("#saveClubForm").text("保存中...");
var obgjParams = {};
// 通过jq的extend实现赋值
$.extend(obgjParams, { clubDesc: $("#infoList").val(), clubLogoUrl: this.clubLogoUrls});
// 在这里我们和后台商量 图片如果是之前初始页面返回不是默认图片 只修改文字的话 传入对应的photoFlag值 表示图片是否修改
if($("#previewImg").attr("src").indexOf("fileName") > -1){
$.extend(obgjParams, { photoFlag: 2 });
}else {
$.extend(obgjParams, { photoFlag: 1 });
}
// 在这里提交url 的地址是我随便写的 可改成实际需要的
$("#actPostInfos").ajaxSubmit({
type: 'post', // 提交方式 get/post
url: 'http://lurenhong.top/love/', // 需要提交的 url
data: obgjParams,
success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
// console.log('保存后数据', data)
// 此处可对 data 作相关处理
if(data.retCode == "OK"){
alert('正确的提示');
$("#saveClubForm").attr("disabled", false)
$("#saveClubForm").text("保存")
} else {
alert('错误的提示');
}
}
});
})
// 头像预览
function previewImage(file, callback) { //file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数
if(!file || !/image\//.test(file.type)) return; //确保文件是图片
self.picFileSource = file.getSource(); // 用于上传图片文件
if(file.type == 'image/gif') { //gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
var fr = new mOxie.FileReader();
fr.onload = function() {
callback(fr.result);
fr.destroy();
fr = null;
}
fr.readAsDataURL(file.getSource());
} else {
var preloader = new mOxie.Image();
preloader.onload = function() {
preloader.downsize(240, 240); //先压缩一下要预览的图片,宽90，高90
var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
callback && callback(imgsrc); //callback传入的参数为预览图片的url
preloader.destroy();
preloader = null;
};
preloader.load(file.getSource());
}
}
})
</script>
注：严谨转载 （分享带上链接，谢谢）