原生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/*" onchange="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>