原生js上传文件

原生js上传文件
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码 

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说原生js上传文件,希望能够帮助大家进步!!!

js核心代码:

function UploadFile() {

    var formData = new FormData();
    jQuery.support.cors = true;
   var file = $("#uploadFile")[0].files[0];
   formData.append("file", file);
   $.ajax({

   type: "post",
   url: "../Service/PicFile.ashx",
   data: formData,
   async: false,
   contentType: false,
   processData: false,
   success: function (data) {

   $("#hdnpic").val(data);

},
error: function (data) {

   console.log(data.statusText);
   }
   });
}

 

function btnAdd() {

    UploadFile();
    $("#btnSure").click();
}

<script type="text/javascript">
function readLocalFile() {

var localFile = document.getElementById("uploadFile").files[0];

var reader = new FileReader();

var content;
reader.onload = function (event) {

content = event.target.result;
document.getElementById("img").src = content;

}
reader.onerror = function (event) {

alert('error')
alert("File could not be read! Code " + event.target.error.code);
}
content = reader.readAsDataURL(localFile, "UTF-8");
}

</script>

 

 

 

asp页面

//文件上传

<tr>
    <td class="TblHead" style="width: 30%;">

    <a href="javascript:;" class="file">选择照片<input type="file" id="uploadFile" accept="image/*" οnchange="readLocalFile();" /></a>

</td>
<td>
    <div id="picdiv" style="overflow: auto;">
    <img src="" id="img" style="border: 0px solid black;" alt="" runat="server" />
</div>
     <asp:HiddenField ID="hdnpic" runat="server" />
</td>
</tr>

 

转载于:https://www.cnblogs.com/mzcode/p/11095756.html

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29735

发表评论