上传文件

<!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_Day6(上)

    Java learning_Day6 本人学习视频用的是马士兵的,也在这里献上 <链接:https://pan.baidu.com/s/1qKNGJNh0GgvlJnitTJGqgA> 提 ...

  2. 带你快速了解Linux文件系统

    http://www.embeddedlinux.org.cn/emb-linux/file-system/201807/03-8197.html 这篇教程将帮你快速了解 Linux 文件系统. 早在 ...

  3. Nuxt服务端使用Axios调用接口时传递cookies

    个人博客 地址:http://www.wenhaofan.com/article/20190321183709 介绍 在做单点登录时,后端需要根据cookie获取登录用户,由于前端项目使用了Nuxt做 ...

  4. MarkDown图文编辑系列教程（二）

    一.写在前面 引言 本文是我写的MarkDown系列教程的第二篇,前一篇的地址:MarkDown图文编辑系列教程(一) 读完本篇,你将获得 学会使用markdown语法进行:区块引用(一种常用的引用格 ...

  5. 为什么 MySQL 使用 B+ 树

    为什么 MySQL 使用 B+ 树是面试中经常会出现的问题,很多人对于这个问题可能都有一些自己的理解,但是多数的回答都不够完整和准确,大多数人都只会简单说一下 B+ 树和 B 树的区别,但是都没有真正 ...

  6. Java对MongoDB进行分组操作并统计各个分组的数量

    最近在检索MongoDB的数据时需要用到分组操作,由于没有现成的说明文档可参考,只能是在代码中不断调试.摸索前进:目前已现实了Java对MongoDB的分组操作,并统计各个分组的数量.现通过示例详细解 ...

  7. MapReduce自定义排序器不生效一个可能的原因

    有问题的代码: package com.mytq.weather; import org.apache.hadoop.io.WritableComparable; import org.apache. ...

  8. Babel 7 主要改变

    1.不支持Node:0.10,0.12,4,5版本 2.更换命名-@babel/xxx 3.移除以年份命名的presets,统一更换成@babel/preset-env 4.移除 ’Stage‘ pr ...

  9. 微信小程序weui的使用

    大家好,我是前端菜鸟,大家可以叫我惊蛰,今天给大家分享一下在微信小程序中对weui的引入和使用,其他的也不再赘述,文中有不对的还请指正,谢谢. 直入主题: 1.下载weui 进入GitHub http ...

  10. 机器学习笔记（十一）OCR技术的应用

    1.介绍OCR: OCR(Photo optical character recognition 照片光学字符识别) 应用于读取电子照片中的文字. 2.算法思路: ① 识别文字区域: ② 字符切分: ...