当前位置:首页 » 文件管理 » js调用js文件上传

js调用js文件上传

发布时间: 2024-11-30 20:53:45

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

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

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

去掉hidden的class,看到的效果是这样的
[图片上传失败...(image-2c700a-1548557865446)]

将上传事件绑定在file的input里面,绑定方式就随意了。
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(); } });

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

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

更多用法可以 参考官网

⑵ 只得到文件路径怎么用js上传

看来是没人愿意回答你这个问题了。我告诉你吧。
浏览器是不允许js上传文件的,如果可以,恶意代码会扫描电脑把敏感文件都上传了,以后谁还敢上网?
所以上传文件只能用<input type="file"/>
至于aspx里面如何使用,这是你自己的事。学习要学精,用法差别不大。

⑶ 怎样用JS控制文件上传时FILE控件内默认的文件类型

有两种方式,
1、用fileupload控件在后台判断
FileUpload1.FileContent.Length判断大小,
System.IO.Path.GetExtension(FileUpload1.FileName)获取文件后缀
2、用jquery上传控件,可以直接判断类型和大小
另外js也可以在前台判断文件类型,但不能获取文件大小,需要引用插件

⑷ 使用js向服务器上传文件

(1)js无法向网站服务器传送文件只能用FTP传送文件,(2)是动态网站要用js代码函数与服务器数据库代码建立连接函数。对应数据库,数据,相应单位,通过指定路径传输倒是制定数据单位。例如照片imag数据单位格式标注照片。通过编辑代码任意网络客户端都可上传到数据库imag格式单位标注中.相片.

热点内容
php模块配置 发布:2024-12-01 00:30:00 浏览:95
九成脚本 发布:2024-12-01 00:23:33 浏览:815
存储内存和运行内存的区别 发布:2024-12-01 00:03:39 浏览:253
编译状态图原理 发布:2024-11-30 23:54:22 浏览:738
谷歌搜索缓存服务器地址 发布:2024-11-30 23:38:59 浏览:503
箍筋加密原因 发布:2024-11-30 23:33:38 浏览:416
千兆路由器有哪些配置 发布:2024-11-30 23:33:36 浏览:411
产品配置具体指哪些 发布:2024-11-30 23:28:21 浏览:16
apt编译环境 发布:2024-11-30 23:28:12 浏览:382
java三大特性 发布:2024-11-30 23:27:08 浏览:481