使用jquery.form.js实现文件上传及进度条前端代码

一、使用jquery.form.js实现文件上传及进度条前端代码

1、ajax的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。

2、需要解释下我的结构，#upload-input-file的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能，#upload-input-btn的button标签是展示给用户的按钮，因为需要样式的美化。上传完成生成的文件名将会显示在.upload-file-result里面，.progress是进度条的位置，先让他隐藏加上 hidden的class，.progress-bar是进度条的主体，.progress-bar-status是进度条的文本提醒。

3、去掉hidden的class，看到的效果是这样的

4、 [图片上传失败...(image-2c700a-1548557865446)]

5、将上传事件绑定在file的input里面，绑定方式就随意了。

6、 var progress=$(".progress-bar"), status=$(".progress-bar-status"), percentVal='0%';//上传步骤$("#myupload").ajaxSubmit({ url: uploadUrl, type:"POST", dataType:'json', beforeSend: function(){$(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal);}, uploadProgress: function(event, position, total, percentComplete){ percentVal= percentComplete+'%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total);}, success: function(result){ percentVal='100%'; progress.width(percentVal); status.html(percentVal);//获取上传文件信息 uploadFileResult.push(result);// console.log(uploadFileResult);$(".upload-file-result").html(result.name);$("#upload-input-file").val('');}, error: function(XMLHttpRequest, textStatus, errorThrown){ console.log(errorThrown);$(".upload-file-result").empty();}});

7、 [图片上传失败...(image-3d6ae0-1548557865446)]

8、 [图片上传失败...(image-9f0adf-1548557865446)]

二、jqueryform表单提交

jquery点击提交。将form表单的值提交到另一个页面并显示出来。不使用ajax。

提交form表单：

具体提交到哪里取决于你的form标签的action属性。

要在另一个页面显示提交的数据那实现的方式就多了。

jquery或js前端提交数据的几种方式

1.jquery提交数据的方式：

（1）第一种jquery序列化提交数据方式：

通过id获取的form表单元素.serialize();

（2）第二种模拟form表单提交元素：

$('#form表单id').attr('method','post');

$('#form表单id'').find('input[name="type"]').val(test);

$('#form表单id').find('input[name="dfrom_to1"]').val(dfrom_to);

$('#form表单id').find('input[name="gt_road_new"]').val(gt_road);

$('#form表id').attr('action',AdminLTE.ctx+'/modules/ltegt/findAllCoverAndInterfere.do');

(1).js提交表单(.submit()方法提交表单)

varaction="%=path%/User_queryAllUser";

document.all.form.action=action;

(2).js替代超链接(window.location.href)

inputtype="button"id="modify"value="修改工号"οnclick="modifyEmp(${myList.employeeId})"

//js不能起名为modify，为敏感关键字

functionmodifyEmp(employeeId){

//employeeId作为js的参数传递进来

window.location.href='%=path%/User_openUserUpdate?employeeId='+employeeId;

如果你是想ajax提交带文件的表单，那真的没法做，

基本都是用iframe模拟异步提交的···

jquery.form.js提交带文件的表单，也是用iframe模拟异步提交的

$("#btnUpload").click(function(){

8if($("#flUpload").val()==""){

9alert("请选择一个图片文件，再点击上传。");

12$('#UpLoadForm').ajaxSubmit({

13success:function(html,status){

14varresult=html.replace("pre","");

15result=result.replace("/pre","");

16$("#image").attr('src',result);

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。

2、在index.html中的script标签，输入jquery代码：

$('body').append('span正在上传中/span');

setTimeout("$('span').text('上传成功');",1000);

3、浏览器运行index.html页面，点击提交按钮，显示了“正在上传中”。

4、例如过了1秒后变成了上传成功的提示。

获得form的url简单的方法：$('form').attr('action')

表单提交简单方法：$('form').submit();

如果有多个表单，请更换选择器，以便找到你所想控制的表单。

以ajax方式提交可以使用ajaxForm方法。

一般来说，前端对后端发送请求是通过ajax发送的，但是ajax对于文件的发送存在问题，所以我们主要还是通过form表单提交。

如果前端接收文件之后需要向后端传输数据的话，就比较麻烦了。

解决办法：第一步：引入jquery.form

第二步：给form绑定ajaxform方法

三、如何给动态添加的form绑定jQuery.validate.js验证

1、$("#addConnectUser").rules("add",{rules:{required:true,isString:true},messages:{required:"用户名为必填项",isString:"请输入规范字符"}});

2、//移除$("#addConnectUser").rules('remove','required');

在此我要讲一下为什么有一个isString验证规则；这个是为了限制表单中input的输入规则；比如:不允许特殊字符，或者一些特殊的要求；这个isString是自己配置的

3、在此我要讲一下为什么有一个isString验证规则；这个是为了限制表单中input的输入规则；比如:不允许特殊字符，或者一些特殊的要求；这个isString是自己配置的

4、jQuery.validator.addMethod("isString",function(value,element){

5、returnthis.optional(element)||(inputTest.test(value));

6、//此处的inputTest为你自定义的验证规则

2,如何给已经添加了表单验证的选项移除验证规则;

7、2,如何给已经添加了表单验证的选项移除验证规则;

8、$("#addConnectUser").rules("remove",'required');

9、//再次添加可以直接用$("#addConnectUser").rules("add",'required');