ajaxfileupload.js异步提交图片

Posted 2020-10-07 summerkxy

碰到问题的解决方法：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="">