zoukankan      html  css  js  c++  java
  • 图片上传与后台交互

    HTML:
    <div class="row">
          <div class="qsc_img col-md-4">
               <p class="qsc_img_del" style="display: none;"><i class="fa fa-close" onclick="del_img(this)"></i> </p>
          </div>
          <input type='file' onchange='previewImage(this)' style='display: none;' class='previewImg'>
       <input type='hidde' value='id'>
    <div class='preview col-md-8'> <a class="btn qsc_img_btn" onclick="img_self(this)">上传</a> <a class="qsc_img_example" data-example="qsc_example_business" href="javascript:;" title="示例">示例</a> </div> </div>
    
    

    JS

    function previewImage(file)
    {
        var self = $(file);
        var div = self.prev(".qsc_img");
        var leg = div.find("img").length;
      var formId = $('input["name=id"]')
    if(leg==1) { return; } if (file.files && file.files[0]) { var reader = new FileReader(); reader.readAsDataURL(file.files[0]); reader.onload = function(evt){ $('<img src="' + this.result +'" class="imghead qsc_img_circle">').appendTo(div); }; var img = self.prev(".qsc_img").find('imghead'); //调用ajax;upload(formId); } }

    //自动触发input类型为file的click事件
    function img_self(thiz) {
        var self = $(thiz);
        self.parents(".preview").prev(".previewImg").trigger("click");
    }
    
    

    AJAX

    function upload(id){
        var form = new FormData(document.getElementById(id));
        $.ajax({
            url:"url",
            type:"post",
            data:form,
            processData:false,
            contentType:false,
            dataType:"json",
            success:function(data){
                if(data.msg==200){
                    swal({
                        title: "",
                        html: false,
                        text: "上传菜单图片成功",
                        type: "success",
                        showCancelButton: false,
                        confirmButtonText: "确定",
                        closeOnConfirm: true
                    };
                }else{
                    swal({
                        title: "",
                        html: false,
                        text: "上传菜单图片失败",
                        type: "error",
                        showCancelButton: false,
                        confirmButtonText: "确定",
                        closeOnConfirm: true
                    });
    
                }
            },
            error:function(e){
                alert("错误!!");
            }
        });
    }
     
  • 相关阅读:
    本博客停止更新说明
    JavaScript备忘录(3)——正则表达式
    JavaScript备忘录(2)——闭包
    JavaScript备忘录(1)——内置类型
    CSS布局:Float布局过程与老生常谈的三栏布局
    地图投影简明笔记
    Three.js源码阅读笔记-5
    js中 set, map区别
    Package.json详解
    node.js 中的package.json文件怎么创建?
  • 原文地址:https://www.cnblogs.com/wei-dong/p/7472210.html
Copyright © 2011-2022 走看看