Jquery 上传文件（不通过form表单提交）

最新推荐文章于 2020-03-13 09:56:43 发布

kenhins

最新推荐文章于 2020-03-13 09:56:43 发布

阅读量2.5w

点赞数 1

分类专栏： jQuery Javascript 文章标签： jquery

本文链接：https://blog.csdn.net/kenhins/article/details/50858057

版权

Javascript 同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

jQuery

40 篇文章 0 订阅

订阅专栏

html代码：（这个是弹窗的页面）

<#-- 更换小图 /下载图片弹窗 -->

  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel"> <@spring.message "secure.video.right.selectImage"/></h4>
      </div>
        <form id="video-image-form" method="post" action="" id="playersetting" class="pageForm required-validate" >
          <div class="modal-body">
            <#--更换小图-->
            <ul class="list-imgs clearfix" id="changing-imgs" vid="${vid!''}">
                <#if images?has_content>
                    <#list images as item>
                        <li>
                            <img src="${item!''}" width="128" height="96" class="changeImage" />
                        </li>
                    </#list>
                </#if>
            </ul>
            <div class="upload-img">
                <label>上传图片</label>
                <input type="file" id="file" name="file" />
                <input type="hidden" id="videoId" name="vid" value="${vid!''}" />
            </div>
          </div>


          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="save-image">保存</button>
          </div>
    </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->

js处理提交代码：

<script>
  $(function(){
      $(".changeImage").on("click",function(){
            var vid = $("#changing-imgs").attr("vid");
            var imgUrl = $(this).attr("src");//小图
            console.log(vid);
            console.log(imgUrl);
              $.ajax({
                  url: '/secure/video/editpool_fimage?vid='+vid+'&first_image='+imgUrl,
                  type: 'GET',
                  cache: false,
                  data: null,
                  processData: false,
                  contentType: false
              }).done(function(json) {
                  if(json.status == "success") {
                      Notify.success("<i class='glyphicon glyphicon-saved'></i>" + json.data, 3);
                      $("#modal").modal('hide');
                      setTimeout(function () { 
                          window.location.reload();
                      }, 3000);
                  } else if(json.status == "fail") {
                      Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i> " + json.message, 3);
                  } else {
                      Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i> " + json.message, 6);
                  }
              }, 'json').fail(function() {
                  Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i>保存失败，请检查网络", 3);
              });
      });

      //保存自定义视频封面图片
        $("#save-image").on("click", function() {
            if ($('#file').val() == "") {
                Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i> 请选择图片后再点击上传", 3);
                return;
            }
            var formData = new FormData();
            formData.append('file', $('#file')[0].files[0]);
            formData.append('vid', $("#videoId").val());
            $.ajax({
                url : '/secure/video/upFristImage',
                type : 'POST',
                cache : false,
                data : formData,
                processData : false,
                contentType : false
            }).done(function(json) {
                if (json.status == "success") {
                    Notify.success("<i class='glyphicon glyphicon-saved'></i>上传成功", 3);
                      $("#modal").modal('hide');
                       setTimeout(function () { 
                            window.location.reload();
                        }, 3000);
                } else if (json.status == "fail") {
                    Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i> " + json.message, 3);
                } else {
                    Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i> " + json.message, 6);
                }
            }, 'json').fail(function() {
                Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i>保存失败，请检查网络", 3);
            });
        }); 




  });
  </script>