ajaxfileupload.js异步提交图片

碰到问题的解决方法:http://blog.yadgen.com/?p=970


<script type="text/javascript" src="_LIB_/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="_JS_/jquery.ajaxfileupload.js"></script>

$(function () {
 2 //照片异步上传
 3 $(‘#inputImage‘).on("change",function () { //此处用了change事件,当选择好图片打开,关闭窗口时触发此事件
 4 $.ajaxFileUpload({
 5 url: "<{:url(‘index/Article/imgUpload‘)}>", //处理图片的脚本路径
 6 type: ‘post‘, //提交的方式
 7 secureuri: false, //是否启用安全提交
 8 fileElementId: ‘inputImage‘, //file控件ID
 9 dataType: ‘json‘, //服务器返回的数据类型
10 success: function (data, status) { //提交成功后自动执行的处理函数
11 $(".artImg").attr("src",data);
12 $("#imgYz").val(data);
13 },
14 error:function(e){
15 alert(1);
16 }
17 })
18 });
19 });    
    <p><label><span>封面图片:<input type="file" name = "artImg" id="inputImage"></span></label></p>
    <img src="" style="width:200px;" class="artImg img-rounded">
    <input style="display:none;" name="art_img" id="imgYz" type="text" value="">
时间: 2024-10-14 21:18:10

ajaxfileupload.js异步提交图片的相关文章

利用ajaxfileupload.js异步上传文件

1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="enclosure"> <button id="upClick" >上传</button> 注意这里的input控件的id和name必须一致:这样在后台利用springMVC接受文件的时候能对应起来: 3.JS代码 <script type=&q

使用ajaxfileupload.js异步上传文件到Servlet

前段时间帮同学做的毕业设计..好吧又是帮人做...需要上传文件,在这里使用了ajaxfileupload.js进行异步的上传文件到Servlet  ,后台保存了文件以后通过JSON返回文件路径到前端,好了废话不多说,直接上代码了... 前端页面比较简单 <input maxlength=16 type=file name="pic" id="pic" size=16 />  <input type="button" id=&qu

ajaxfileupload.js 异步上传文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ include file="/WEB-INF/views/include/taglib.jsp"%><%String path = request.getContextPath();String basePath = request.getScheme()

使用AjaxFileUpload.js实现文件异步上传

ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: <input type="file" name="upload" hidden="hidden" id="file_upload"

使用ajaxfileupload.js文件异步上传文件

在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script src="

ajaxfileupload.js实现无刷新异步上传图片Demo

第一步:导入ajaxfileupload.js文件 第二步:新建一个aspx,在body里面创建一个文件域,一个上传按钮 <body> <input type="file" name="file" id="fileId" /> <input type="button" value="上传" id="uploadBtn" /> <br />

springmvc_ajax异步上传文件(基于ajaxfileupload.js)

引入js <script th:src="@{/js/ajaxfileupload.js}"></script> html <tr> <td>附件:</td> <td> <input type="hidden" id="insertcyefuji" name="fuji" /> <input type="file" i

ajax图片上传(ajaxfileupload.js插件)

向后台交互方式: 1.form表单提交,action="url" 2.ajax异步提交 区别: form在提交之后无法获得后台的回调参数,只能由后台工作人员控制提交成功之后的路径跳转:优点是可以直接提交文件,如:图片.txt文件等: ajax很好的处理字符格式的提交并获取提交成功之后的回调参数,但是无法提交图片. ajax提交图片只能把图片格式转化为进制流模式 解决方式: 1 <script type="text/javascript" src="j

上传文件中使用ajaxfileupload.js碰到的问题

在做上传图片时需要用到异步上传值服务器,当时选用了ajax的ajaxfileupload可以上传. 这里写下踩过的坑 1:使用$.ajaxFileUpload({});函数,网页报错,提示没有这个函数. 解决:导入ajaxfileupload.js文件.简单 2:上传成功了没有执行回调,即$.ajaxFileUpload({ url:", //你处理上传文件的服务端 type: 'POST', fileElementId:'file',#文件在html中的id dataType: 'json',