本文实例为大家分享了Java脚本语言实现图片上传并预览并提交创建交互式、快速动态网页应用的网页开发技术的具体代码，供大家参考，具体内容如下

图片上传并预览

超文本标记语言

div class=' file-box ' img id=' preview '/input type=' text ' id=' img field ' class=' txt ' placeholder='预览输入类型=' file ' name=' file ' id=' input _ file ' accept=' image/gif，image/jpeg，image/jpg，image/png，image/SVG ' ' imgPreview(this)'/div CSS。文件箱{ position : relative display :内联块；}.文件箱img { width: 50px高度： 50px边界半径： 50%;绝对位置：top :-30px；左： 0；显示器：内联块；border:无；}.文件箱txt .文件箱。文件{ width: 70pxheight: 36px绝对位置：top :-20px；左侧： 100像素文本对齐：中心；}JS

函数imgPreview(fileDom) { //判断是否支持文件阅读器如果(窗口文件阅读器){ var reader=new file reader()；} else { alert('您的设备不支持图片预览功能，如需该功能请升级您的设备!');} //获取文件var file=filedom。文件[0]；var imagetype=/^image//；//是否是图片if(！imagetype。测试(文件。类型){ alert('请选择图片!');返回；} //读取完成reader.onload=function(e) { //获取图片DOM var img=文档。getelementbyid('预览')；//图片路径设置为读取的图片img。src=e .目标。结果；};reader.readAsDataURL(文件);}上传图片提交创建交互式、快速动态网页应用的网页开发技术

如果想把图片信息通过创建交互式、快速动态网页应用的网页开发技术传给后端，则需要通过新表单数据()上传图片信息，然后使用追加()方法向该对象里添加字段，具体代码如下：

（注：以下代码在图片预览成功后执行，也就是在reader.readAsDataURL(文件);后)

var formData=new formData()；formData.append('file '，$('#input_file')[0]).文件[0]);//添加图片信息的参数formData.append('sizeid '，123)；//添加其他参数$.Ajax({ URL : '/material/uploadFile '，type: 'POST '，cache: false，//上传文件不需要缓存data: formData，processData: false，//告诉框架不要去处理发送的数据contentType: false，//告诉框架不要去设置内容类型请求头成功：函数（数据){ var RS=eval('(' data ')')；if(rs.state==1){ tipTopShow('上传成功!');} else { tipTopShow(RS。味精)；} }，错误：函数（数据){ tipTopShow('上传失败');} })

更多精彩内容请参考专题《ajax上传技术汇总》 , 《javascript文件上传操作汇总》 和《jQuery上传操作汇总》 进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。