zoukankan      html  css  js  c++  java
  • ajax:html5上传文件,上传之前可以实现本地预览

    本主题主要涉及两个新内容:

    1、上传文件(主要使用了FormData)

    2、本地预览(主要使用了FileReader)

    html5的FormData其实就是平时的Form表单,只是html5可以直接新建这样一个对象,然后通过ajax提交

    FormData对象有一个方法:append(Object name,Object value,[String blobName])

    然后上传文件跟平时的流程一样了:

    前台有<input type="file" id="upload" />

    var el = document.getElementById("upload");
    if (el.files.length <= 0) return;
    
    var data = new FormData();
    data.append("后台取得文件的key", el.files[0]);
    $.ajax({
        url: "Handler1.ashx",
        type: "POST",
        data: data,
        processData: false, //不处理数据
        contentType: false //不修改MIME类型
    })

    后台就是直接用postfile接收就可以了

    HttpPostedFile file = context.Request.Files["前台定义的key"];
    string strSavePath = context.Server.MapPath("文件名");
    file.SaveAs(strSavePath);

    FileReader其实就是一个读取用户选择文件的base64数据的对象

    var reader = new FileReader();
    reader.onload = function () {
        $("<img src='" + this.result + "'/>").appendTo("body");
    }
    reader.readAsDataURL($("#UploadFile").get(0).files[0]); //读出文件的base64
  • 相关阅读:
    nginx 安装教程
    php 安装教程
    第一个AWK程序的尝试
    memcached-tool 工具
    java数据库 DBHelper
    Innodb的三大关健特性
    我遇到的一个ClassNotFoundException问题
    storm学习初步
    再探 jQuery
    简单聊一聊正则表达式中的贪婪匹配和非贪婪匹配
  • 原文地址:https://www.cnblogs.com/ZC_Mo-Blog/p/5849539.html
Copyright © 2011-2022 走看看