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;"runat="server" />
- </div>
- <asp:HiddenField ID="hdnpic" runat="server" />
- </td>
- </tr>
来源: http://www.bubuko.com/infodetail-3105245.html