上传图片和文字

<div class="control-group span24">
   <div class="row">
        <div class="span18">
            <h2 style="color:#408FFB">1、 缴费成功推广链接</h2>
        </div>
        <div class="span4"
          <button type="button" id="saveClubForm" class="button button-primary">保存</button>
        </div>
   </div>
   <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" src="http://hbimg.b0.upaiyun.com/bdaca9a07e1a8947c00c2f826ebf848750927aa24963-cATwbg_fw658"   class="banner-img" alt="默认图片" style="height:250px;width:250px" />
                <input name="file" id="albumFile" type="file" hidden="hidden" accept="image/*" />
           </div>
         <div class="row">
              <div class="span4">
                   <span style="height:30px;line-height:30px;">点击上传推广图片:</span>
               </div>
               <div class="span8">
                  <button id="chooseBannerImgBtn" class="button button-primary"  >上传图片</button>
                  </div>
          </div>
          <div class="row">
              <div class="span4">
                   <label class="control-label">
                       <s>*</s>填 写 推 广 链 接 :</label>
               </div>
               <div class="span16">
                   <input type="text" style="width:100%" id="infoList" name="txt" placeholder="请输入推广链接" data-rules="{required:true}" aria-disabled="false"
                    aria-pressed="false">
                </div>
            </div>
          </div>
        </div>
        </form>
    </div>
</div>

引入jq 和 jquery.form.js

预览html是这样,

 /**
    * actPostInfos from表单
    * albumFile 提交时文件名
    * previewImg 预览图片的div
    * saveClubForm 保存按钮
    * chooseBannerImgBtn 上传图片按钮
    * infoList 链接输入框id
    */
$(function (){
// 初始页面时把后台图片保存
        var clubLogoUrls = '';
        // 检测上传图片的大小
        $("#albumFile").change(function () {
            var albumFile = $("#albumFile").val().toLowerCase().split('.'); //以“.”分隔上传文件字符串
            var $file = $(this);
            // console.log($file);
            if (document.actPostInfos.albumFile.value == "") {
                alert('图片不能为空！');
                $("#albumFile").val("");
                // 从新设置默认图片
                $("#previewImg").attr("")
                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 * 2) { // 1024*1024*2
                        alert('图片不能大于2M, 请重新选择 !');
                        $("#albumFile").val("");
                        // 如果图片大于设定尺寸 请重新☑️
                        $("#previewImg").attr("")
                        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 = $("#albumFile").val().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());
            }
        }
})