input图片上传的方法及回调函数使用。

在做公司业务的时候，需要上传图片，之前还真没使用过，现在在这里先留下方法。

其实很简单，先看前端，就是使用的input=“file"这个属性。

<head>
    <meta charset="UTF-8">
     
    <script type="text/javascript">  

        function save() {
            $("#mainform").submit(); 
        }
    </script> 
</head>
<body>
    <form method="post" enctype="multipart/form-data" id="mainform">
        <div>
            <input type="file" id="file" name="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" />
             
            <input type="button" onclick="save()"  value="上传"> 
        </div>
        <div id="imgdiv" style="height:160px ;width:160px">
        </div>
    </form>
</body>
View Code

后台就使用Request.Files接收就行了。

 var file = Request.Files["file"];//图片

但是发现这种方式有个缺陷，form提交后没有回调函数。于是在百度后发现有人使用js.form可以回调，试了一下发现可行。

需要下载jquery.form.min.js

<head>
    <meta charset="UTF-8">
    <script src="~/Content/jquery.form.min.js"></script>
    <script type="text/javascript">  
        //上传
        function submitBtn() {
            if ($("#file").val() == "") {
                alert("请先选择图片")
                return;
            }
            //回调
            $("#mainform").ajaxSubmit({
                type: "post",
                cache:false,
                success: function (text) {
                    $("#ds").val(text);
                    $("#file").val("");
                    $("#pic").remove();
                }
            });  
        } 

        function selectFile() {
            $("#file").trigger("click"); 
        } 
        //在div中让图片显示出来
        function getFilePath() {
            if (typeof FileReader == "undefined") {
                alert("您的浏览器不支持FileReader对象！");
            }
            $("#img").empty();
            var oFReader = new FileReader();
            var file = document.getElementById('file').files[0];
            console.log(file)
            oFReader.readAsDataURL(file);
            oFReader.onloadend = function (oFRevent) {
                var src = oFRevent.target.result;
                $("#img").append("<img  id=\"pic\"  src=\"" + src + "\">");
            }
        }
     
     
    </script>
    <style>
        img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
    <form id="mainform" enctype="multipart/form-data" method="post" >
        <div> 
            <input type="file" id="file" name="file" onchange="getFilePath()" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" /> 
            <input  type="button"      onclick="submitBtn();"  value="点击上传">
            <input id="ds"  name="ds" readonly="readonly"/>
        </div>
        <div id="img" style="height:160px ;width:160px" >
        </div>
    </form>
</body>
View Code

后台依然是使用Request.Files接收。然后使用

file.SaveAs (FullPath);//上传

进行保存，FullPath为需要保存的路径。

 

 

 

posted @ 2019-12-03 17:27  保护青蛙  阅读(2551)  评论(0)    收藏  举报