上传文件

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <!--引用相关的js文件  注意先引用jquery-->

    <script src="js/jquery-1.11.3.js"></script>

    <script src="js/ajaxfileupload.js"></script>

    <style>

        .file {

            position: relative;

            background-color: #b32b1b;

            border: 1px solid #ddd;

            width: 68px;

            height: 25px;

            display: inline-block;

            text-decoration: none;

            text-indent: ;

            line-height: 25px;

            font-size: 14px;

            color: #fff;

            margin:  auto;

            cursor: pointer;

            text-align: center;

            border: none;

            border-radius: 3px;

        }

            .file input {

                position: absolute;

                top: ;

                left: -2px;

                opacity: ;

                width: 10px;

            }

    </style>

    <script>

        $(function () {

            //选择文件

            $(".file").on("change", "input[type='file']", function () {

                var filePath = $(this).val();

                //设置上传文件类型

                ////if (filePath.indexOf("xls") != -1 || filePath.indexOf("xlsx") != -1) {

                    //上传文件

                    $.ajaxFileUpload({

                        url: 'FileHandler.ashx',//处理程序路径

                        secureuri: false,

                        fileElementId: 'btnfile',

                        dataType: 'json',

                        success: function (data, status) {

                            //获取上传文件路径

                            //$("#txt_filePath").val(data.filenewname);

                            alert("文件上传成功！");

                        },

                        error: function (data, status, e) {

                            //alert(e);

                            alert("not");

                        }

                    });

                ////} else {

                ////    alert("请选择正确的文件格式！");

                ////    //清空上传路径

                ////    $("#txt_filePath").val("");

                ////    return false;

                ////}

            });

        })

    </script>

</head>

<body style="font-size:25px;">

    <!--ajax配合ashx实现文件上传-->

    <div>

        <span>选择文件：</span><input id="txt_filePath" type="text" readonly="readonly" />

        <a class="file"><input id="btnfile" name="btnfile" type="file" />浏览</a>

    </div>

</body>

</html>

【 js 上传文件】的更多相关文章

  1. 使用ajaxfileupload.js上传文件

    一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...

  2. js 上传文件后缀名的判断 var flag=false;应用

    js 上传文件后缀名的判断  var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  3. js上传文件带参数，并且，返回给前台文件路径，解析上传的xml文件，存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  4. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

  5. 前端js上传文件 到后端接收文件

    下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...

  6. 纯js上传文件 很好用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. 原生js上传文件，使用new FormData()

    当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作: <form action="接口" enctype="multi ...

  8. django + dropzone.js 上传文件

    1.dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2.dropzone.js ...

  9. js上传文件

    一.原始的XMLHttpRequestjs上传文件过程(參考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象: ...

  10. js上传文件获取文件流

    上传文件获取文件流 <div> 上传文件 : <input type="file" name = "file" id = "file ...

随机推荐

  1. Java集合之Arrays 剖析

    Arrays工具类位于 java.util 包下,是一个比较常用的工具类,其可以针对数组进行各种操作,比如赋值.排序.搜索等等.在项目过程中我们针对数组的有关操作,如果不方便直接操作,均可通过调用此类 ...

  2. Linux网络课程学习第一天

    第一天上课主要介绍了LINUX系统和Linux课程的情况.了解了开源系统的四大优势,六大特点. 最具有心得的一句话: 学习是件苦差事: 稻盛和夫先生的话也深深激励着我:“工作马马虎虎,只想在兴趣和游戏 ...

  3. 题解【AcWing1089】烽火传递

    题面 单调队列优化 DP 模板题. 我们考虑设 \(dp_{i}\) 表示从 \(1\) 到 \(i\) 能够准确传递情报,且第 \(i\) 个烽火台发出信号的最小费用. 转移方程不难得出:\(dp_ ...

  4. pandas玩转excel-> (1)如何利用pandas创建excel数据文件

    #在Anaconda3 的Spyder中   #定义pandas模块为pd import pandas as pd   #创建一个新的DataFrame对象,定义这个对象中有两个字段:ID和Name, ...

  5. Java参数传递是值传递还是引用传递？

    当一个对象被当作参数传递到一个方法后,在此方法内可以改变这个对象的属性,那么这里到底是值传递还是引用传递? 答:是值传递.Java 语言的参数传递只有值传递.当一个实例对象作为参数被传递到方法中时,参 ...

  6. include=FALSE的作用

    每次都会加载很多的包,会显示很多没用的信息,特别是那个spdep. 例如: {r include=FALSE} library(plm) library(tseries) library(zoo) l ...

  7. php7 安装redis拓展

    配置之前应该是环境已经搭好了,phpinfo的页面可以加载出来.   使用git clone下载git上的phpredis扩展包 git clone  https://github.com/phpre ...

  8. 二维数组填充datagridview

    public void TwoDArrayShowINDatagridview(string[,] arr) { DataTable dt = new DataTable(); for (int co ...

  9. mycat linux上目录介绍

    1.本文引用来自mycat官方文档,具体可以浏览mycat官网 2.linux系统下面的目录 MyCAT 有提供编译好的安装包,支持 windows.Linux.Mac.Solaris 等系统上安装与 ...

  10. JFinal获取多个model

    个人博客 地址:http://www.wenhaofan.com/article/20180930112646 由于jfinal框架自身没有实现获取多个同一类型的Model的方法,导致获取ModelL ...