xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > js实现图片与文件上传的方法,聊一聊JavaScript作

js实现图片与文件上传的方法,聊一聊JavaScript作

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-10 22:00

本文实例讲述了Struts2 jquery.form.js实现图片与文件上传的方法。分享给大家供大家参考,具体如下:

在上一篇文章//www.jb51.net/article/83504.htm中,用javascript实现了用户验证,但并没有对密码进行验证,这次追加了这个功能,并分别用javascript和jquery实现。

每种编程语言,其变量都有一定的有效范围,超过这个范围之后,变量就失效了,这就是变量的作用域。从数学的角度来看,就是自变量的域。

jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件。官方网站:

一.用jquery的ajax实现的关键代码

作用域是变量的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在 JavaScript 中, 对象和函数同样也是变量,变量在声明他们的函数体以及这个函数体嵌套的任意函数体内部都是有定义的。

结合Struts2三步轻松实现文件上传

实现如下

一、静态作用域和动态作用域

一般是针对一个页面可能不止一个Form表单,所以在一个面提交表单会影响到另一个表单,为此,图片上传表单就可以使用无刷新提交方式上传,也就是异步上传,这时jquery.from.js就派上用场了。

/*jquery实现
$(document).ready(function(){
  $("#account").blur(function(event) {
    $.ajax({
      type:"GET",
      url:"checkAccount.php?account=" $("#account").val(),
      dataTypes:"text",
      success:function(msg){
        $("#accountStatus").html(msg);
      },
      error:function(jqXHR) {
        alert("账号发生错误!")
      },
    });
  });

  $("#password").blur(function(event) {
    $.ajax({
      type:"GET",
      url:"checkPassword.php?",
      dataTypes:"text",
      data:"account=" $("#account").val() "&password=" $("#password").val(),
      success:function(msg){
        $("#passwordStatus").html(msg);
      },
      error:function(jqXHR) {
        alert("密码查询发生错误!")
      },
    });
  });
}); */

静态作用域

一、HTML

二.用javascript实现的关键代码

是指声明的作用域是根据程序正文在编译时就确定的,也称为词法作用域。大多数现代程序设计语言都是采用静态作用域规则,JavaScript就是采用的这种作用域。
采用静态作用域的语言中,基本都是最内嵌套作用域规则:由一个声明引进的标识符在这个声明所在的作用域里可见,而且在其内部嵌套的每个作用域里也可见,除非它被嵌套于内部的对同名标识符的另一个声明所掩盖。
为了找到某个给定的标识符所引用的对象,应该在当前最内层作用域里查找。如果找到了一个声明,也就可以找到该标识符所引用的对象。否则我们就到直接的外层作用域里去查找,并继续向外顺序地检查外层作用域,直到到达程序的最外嵌套层次,也就是全局对象声明所在的作用域。如果在所有层次上都没有找到有关声明,那么这个程序就有错误。如下:

导入本jS到页面、写好上传表单

实现如下

function cha(){
 var name = "xiao;"
 function chb() {
 function chc() {
 console.log(name);
 }
 } 
}
<script type="text/javascript" src="/js/jquery.form.js"></script>
<!—图片上传 -->
<s:form id="picForm" name="picForm" action="/notice/showAddNotice.action" method="post" 
  enctype="multipart/form-data">
    <input type="file" name="pic" size="30"/><input type="submit" value="上传"/>
</s:form>
//javascript实现
  function checkAccount(){
    var xmlhttp;
    var name = document.getElementById("account").value;
    if (window.XMLHttpRequest)
     xmlhttp=new XMLHttpRequest();
    else
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.open("GET","checkAccount.php?account=" name,true);
    xmlhttp.send();

    xmlhttp.onreadystatechange=function(){
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
      document.getElementById("accountStatus").innerHTML=xmlhttp.responseText;
    }
  }

  function checkPassword(){
    var xmlhttp;
    var name = document.getElementById("account").value;
    var pw = document.getElementById("password").value;
    if (window.XMLHttpRequest)
     xmlhttp=new XMLHttpRequest();
    else
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.open("GET","checkPassword.php?account=" name "&password=" pw,true);
    xmlhttp.send();

    xmlhttp.onreadystatechange=function(){
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
      document.getElementById("passwordStatus").innerHTML=xmlhttp.responseText;
    }
  }

首先函数从chb()搜索有没有name的定义,然后继续一层一层的向上搜索,最后在cha()中搜到了name的定义,如果没有搜到,则会报错。

二、JS

mysql和数据库部分跟上篇博文的一样没有改变,运行结果如下图

2、动态作用域

// 为表单绑定异步上传的事件
$(function(){
    // 为表单绑定异步上传的事件
    $("#picForm").ajaxForm({
    url : "${pageContext.request.contextPath}/notice/uploadPic.action", // 请求的url
    type : "post", // 请求方式
    dataType : "text", // 响应的数据类型
    async :true, // 异步
    success : function(imageUrl){
        //alert(imageUrl);
    },
    error : function(){
        alert("数据加载失败!");
    }
});
// 为提交按钮绑定事件
$("#saveBtn").click(function(){
    // 表单输入较验
    var title = $("#title");
    // 获取textarea的内容
    var content = tinyMCE.get('content').getContent();
    var msg = "";
    if ($.trim(title.val()) == ""){
        msg = "公告标题不能为空!";
        title.focus();
    }else if ($.trim(content) == ""){
        msg = "内容不能为空!";
    }
    msg = "";
    if (msg != ""){
        alert(msg);
    }else{
        // 表单提交
        $("#noticeForm").submit();
    }
});

图片 1

动态作用域的语言中,程序中某个变量所引用的对象是在程序运行时刻根据程序的控制流信息来确定的。

三、Struts2Action

以上就是本文的全部内容,希望对大家的学习有所帮助。

二、JavaScript的作用域

public class uploadPicAjax extends AbstractAjaxAction {
    private static final long serialVersionUID = -4742151106080093662L;
    /** Struts2文件上传的三个属性 */
    private File pic;
    private String picFileName;
    private String picContentType;
    @Override
    protected String getJson() throws Exception {
        //获取项目部署的路径
        String realPath = ServletActionContext.getServletContext()
                .getRealPath("/images/notice");
        //生成新的文件名
        String newFileName = UUID.randomUUID().toString() "."
                 FilenameUtils.getExtension(picFileName);// 获取文件的后缀名 aa.jpg --> jpg
        FileUtils.copyFile(pic, new File(realPath   File.separator   newFileName));
        return "/images/notice/"   newFileName;
    }
    /** setter and getter method **/
    ......
}

您可能感兴趣的文章:

  • node.js captchapng jsonwebtoken实现登录验证示例
  • 用JS实现简单的登录验证功能
  • JSP Servlet实现生成登录验证码示例
  • js实现登录验证码
  • JavaScript登录验证码的实现
  • JavaScript登录验证基础教程

JavaScript中有两种作用域,分别为全局作用域和局部作用域。

四、配置Struts2.xml

1、全局作用域(Global Scope)

<!-- 图片的异步上传 -->
<action name="uploadPic" class="com.wise.hrm.action.notice.uploadPicAjax">
</action>

在代码中任何位置都是有定义的。即使在html 页面中嵌套的一段js代码中定义了一个全局变量,在引用的js文件中仍能访问到该变量。这就很有可能会造成全局变量的污染。

好了,从页面到后台就已经写完了。这样就可以上传了。完毕!

以下三种情况的变量都会被视为全局变量
(1)最外层的函数和最外层的变量拥有全局作用域
(2)未经定义而直接赋值的变量自动被声明为拥有全局作用域
(3)所有window对象的属性拥有全局作用域

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

2、局部作用域(Local Scope)

希望本文所述对大家jQuery程序设计有所帮助。

局部作用域一般只能在固定的代码片段中才能访问,如函数内部的变量(函数作用域)

您可能感兴趣的文章:

  • struts2 jsp jquery Jcrop实现图片裁剪并上传实例
  • Struts2中图片以base64方式上传至数据库
  • Java以struts2为例介绍如何实现图片上传
  • Struts2 uploadify多文件上传实例
  • JS Struts2多文件上传实例详解
  • struts2实现多文件上传
  • java中struts2实现文件上传下载功能实例解析
  • struts2单个文件上传的两种实现方式
  • struts2中实现多个文件同时上传代码
  • Java框架Struts2实现图片上传功能
var name = "xuxiaoping";
function echoName() {
 var firstname = "xu";//局部作用域
 secondname = "xiao";//全局作用域
 function echoFirstName() {
 console.log(first name);//xu
 }
 console.log(secondname);
 return echoFirstName;
}
console.log(name);//全局作用域

var f = echoName();
f();
console.log(firstname);
console.log(secondname);

结果为:
xuxiaoping
xiao
xu//内层函数可以访问外层函数的变量
undenfined  //在函数外部无法访问函数的内部变量
xiao

JavaScript将全局变量附加到了window对象上,成为了window对象的属性。

3、函数作用域

块级作用域:任何一对花括号中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的。大多数类C语言都是有块级作用域的。
然而JavaScript的有个重要的特点就是没有块级作用域。

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:js实现图片与文件上传的方法,聊一聊JavaScript作

关键词: CMD体育平台

上一篇:开启BootStrap学习之旅,JS功能代码集锦

下一篇:没有了