用JQuery获取File input里面的数据

发布时间:2019-05-25 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了用JQuery获取File input里面的数据脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

今天学习了用jquery获取File input里面的数据。

我写了一个爪哇服务,用来在网页或命令行中通过表单上传文件

在网页中使用的表单方式为multipart/form-data,在爪哇里面通过MultipartHttpServletRequest获取文件,很好用啊。

可是写命令行的小朋友捣乱,使用的表单方式为application/x-www-form-urlencoded,传的是文件内容字符串,现在可好了,爪哇里面获取不到文件了。

洽谈之后,决定将文件以字符串的方式传输,就是接下来的内容了。

首先有个表单,里面有两个input,一个用来选择文件,而另一个则用来存储读到的文件内容。

<form id="form" >
    <input type="file" name="fileTrans" />
    <input type="hidden" name="file" />
</form>

接下来检查浏览器是否支持Fie API

if (!(window.File || window.FileReader || window.FileList || window.Blob)) {
    alert('你妈喊你换Chrome浏览器啦');
}

在选择好文件之后,通过Jquery获取到文件内容

VAR files = $('input[name="fileTrans"]').PRop('files');//获取到文件列表

if(files.length == 0){
    alert('请选择文件');
    return;
}else{
    var reader = new FileReader();//新建一个FileReader
    reader.readAsText(files[0], "UTF-8");//读取文件 
    reader.onload = function(evt){ //读取完文件之后会回来这里
        var fileString = evt.target.result;
        form.file.value = fileString; //设置隐藏input的内容
    }
}

现在提交表单,就可以通过request.getParameter("file");获取到文件内容噜。

用JQuery获取File input里面的数据

脚本宝典总结

以上是脚本宝典为你收集整理的用JQuery获取File input里面的数据全部内容,希望文章能够帮你解决用JQuery获取File input里面的数据所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。