form | 易学教程

如何实现无刷新文字上传

阅读更多关于如何实现无刷新文字上传

一、总结（点击显示或隐藏总结内容）一句话总结：用的是普通的图片上传技术，只不过将跳转页面用iframe 放到了自己的体内并且隐藏了 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <script src="jquery.min.js"></script> 7 </head> 8 <body> 9 <h1> 10 <?php 11 echo "当前时间戳：".time(); 12 ?> 13 </h1> 14 <form action="upload.php" method="post" target="mywin" enctype="multipart/form-data"> 15 <p>文件上传</p> 16 <p> 17 <input type="file" name="img" id=""> 18 </p> 19 </form> 20 <div> 21 <img src="" id="imgid"> 22 </div> 23 <iframe name="mywin" frameborder="0" src="" style="display: none;"></iframe> 24 </body> 25 <script> 26 $(

Django中Form的基本使用

阅读更多关于 Django中Form的基本使用

from django import forms from django.forms import fields class UserInfo(forms.Form): username = fields.CharField(required=True,error_messages={ 'required':'username不能为空' }) # 正则表达式 password = fields.CharField(required=True,error_messages={ 'required':'password不能为空' }) email = fields.EmailField(required=True,error_messages={ 'required':'email不能为空', 'invalid':'email格式错误' }) #不能为空 # 获取用户提交的数据 request.POST # 数据和正则表达式进行验证 # 1.是否验证成功 # 2.成功：获取数据 # 3.失败：显示错误信息 def add_user(request): if request.method == 'GET': return render(request,'add_user.html') else: obj = UserInfo(request.POST) # 定义一个form实例 #

django Form组件上传文件

阅读更多关于 django Form组件上传文件

上传文件　　注意：FORM表单提交文件要有一个参数 enctype="multipart/form-data" 普通上传： urls： url(r'^f1/',views.f1), url(r'^f2/',views.f2), views：　 def f1(request): if request.method == "GET": return render(request,'f1.html') else: import os #导入os模块 #request.get / post /FILES方式.get()取值去文件name=fafafa的值 file_obj=request.FILES.get("fafafa") #拿到一个文件对象 f=open(os.path.join('static',file_obj.name),'wb') #将文件名加入到static目录下 for chunk in file_obj.chunks(): #chunk块文件的大小,循环file_obj文件对象.chunks f.write(chunk)#写到文件里面去 f.close() # return HttpResponse(".....") return render(request,'f1.html') html：　　 <!DOCTYPE html> <html lang="en">

Angular之响应式表单 ( Reactive Forms )

阅读更多关于 Angular之响应式表单 ( Reactive Forms )

项目结构一首页 ( index.html ) <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular4ReactiveForm</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-hero-list></app-hero-list> </body> </html> 二根模块 ( app.module.ts ) import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { NgModule } from '@angular/core'; import { HeroListComponent } from './hero-list/hero-list.component'; import {

[Angular] Component architecture and Reactive Forms

阅读更多关于 [Angular] Component architecture and Reactive Forms

It it recommeded that when deals with form component, we can create a container component to hold state, and then create a stateless component to enpower the form. For example: In the example has two components, one is container component 'meal.component.ts', another is statless component 'meal-form.component.ts'. For the container component, it talks to service: import {Component} from '@angular/core'; import {Meal} from '../../../shared/services/meals/meals.service'; @Component({ selector: 'meal', styleUrls: ['meal.component.scss'], template: ` <div class="meal"> <div class="meal__title">

[Angular2 Form] Nested formGroup, and usage of formGroupName

阅读更多关于 [Angular2 Form] Nested formGroup, and usage of formGroupName

We can nest formGorup: this.reactiveForm = fb.group({ username: [ '', [ Validators.required, Validators.minLength(3) ] ], pwds: fb.group({ pwd: '', rpwd: '' }, {validator: passwordValidator}) }); We make password as an own group. So in html, we need to use formGroupName istead of formControlName. <form [formGroup]="reactiveForm" novalidate autocomplete="off"> <div class="form-field"> <label>Username:</label> <input formControlName="username"> <div class="field-error-message" *ngIf="reactiveForm.controls.title.errors?.required"> Username is required </div> </div> <div formGroupName="pwds"> <div

JS组件系列——Form表单验证神器： BootstrapValidator

阅读更多关于 JS组件系列——Form表单验证神器： BootstrapValidator

github:https://github.com/nghuuphuoc/bootstrapvalidator 参考博客： JS组件系列——Form表单验证神器： BootstrapValidator 参考博客： bootstrapvalidator之API学习表单HTML，如下：　　　　　　　　　　<form role="form" id="roleForm"> <div class="box-body"> <div class="form-group"> <input type="text" class="form-control" id="inputRoleName" name="roleName" placeholder="角色名称" /> </div> <div class="form-group"> <input type="text" class="form-control" id="inputRoleDescribe" name="roleDescribe" placeholder="角色描述" /> </div> <div class="form-group"> <select class="form-control select2" style="width: 100%;" id="selectRoleType"> </select> </div> <div

用户登录页面--SQL注入

阅读更多关于用户登录页面--SQL注入

web网站攻击方式多种多样，sql注入是经常使用的攻击方向。攻击者把SQL命令插入到Web表单的输入域或页面请求的字符串，欺骗服务器执行恶意的SQL命令 SQL注入不是Web或数据库服务器中的缺陷，而是由于编程实践较差且缺乏经验而导致的。动态拼接的SQL指令最易受攻击。如登录时使用的SQL指令： $query = 'SELECT * from Users WHERE login = ' $username ' AND password = ' $password' 攻击者主要利用了mysql的注释指令：# 或者 -- 攻击者在帐户文本框中输入 aaa' or 1=1 #，即可骗过服务器，成功登录详情情况看下面的代码：数据库连接数据库的conn.php <?php $mysqli = new mysqli('localhost','root','root','demo'); if($mysqli->connect_errno){ printf("连接数据库失败: %s\n", $mysqli->connect_error); exit(); } $mysqli->query('set names utf8'); 用户登录 login.php <?php if(empty($_POST)){ session_start(); unset($_SESSION);

bootstrapValidator表单验证插件

阅读更多关于 bootstrapValidator表单验证插件

bootstrapValidator——一个很好用的表单验证插件，再也不用手写验证规则啦！ bootstrapValidator官方文档： http://bootstrapvalidator.votintsev.ru/api/ 一、举个丽子：写了一个小例子先来看一下效果吧！预览效果查看源码二、具体实现步骤如下： 1、下载jquery、bootstrap、bootstrapValidator bootstrapValidator下载地址： https://github.com/nghuuphuoc/bootstrapvalidator/commit/c023475236f66baab72975887a26e51d65df72f7 在这里下载后，解压bootstrapValidator-master，里面会有jquery、bootstrap、bootstrapValidator。其中bootstrap和jquery在vendor文件夹中，bootstrapValidator在src文件夹中。直接复制过来用就可以了，不用单独一个一个下载。在demo文件夹中有很多例子，可以直接拿过来用。注意：如果bootstrap或jquery是单独下载的，可能会因为版本不一致，导致验证时，不会实时更新状态，最好使用下载后bootstrapValidator

前端本地文件操作与上传

阅读更多关于前端本地文件操作与上传

前端无法像原生APP一样直接操作本地文件，否则的话打开个网页就能把用户电脑上的文件偷光了，所以需要通过用户触发，用户可通过以下三种方式操作触发：通过input type="file" 选择本地文件通过拖拽的方式把文件拖过来在编辑框里面复制粘贴第一种是最常用的手段，通常还会自定义一个按钮，然后盖在它上面，因为type="file"的input不好改变样式。如下代码写一个选择控件，并放在form里面： <form> <input type="file" id="file-input" name="fileContent"> </form> 然后就可以用 FormData 获取整个表单的内容： $("#file-input").on("change", function() { console.log(`file name is ${this.value}`); let formData = new FormData(this.form); formData.append("fileName", this.value); console.log(formData); }); 把input的value和formData打印出来是这样的：可以看到文件的路径是一个假的路径，也就是说在浏览器无法获取到文件的真实存放位置。同时FormData打印出来是一个空的Objet

订阅 form