ajax图片上传

使用ajaxfileupload.js插件

html代码：

 1  <p>
 2     <label>ajax上传</label>
 3     <input type="file" name="fileToUpload" id="fileToUpload" class="inp_fileToUpload" multiple="multiple"/>
 4     <img src="$web.site$web.tpl#**#adminht/images/lb_head.jpg" width="30px" height="30px" class="img_upload" id="img" />
 5    </p>
 6    <p>
 7     <label>最新修改人员：</label>
 8     <input readonly="readonly" type="text" size="30" />
 9    </p>
10    <div>
11    
12     <script type="text/javascript">
13      $(function() {
14       $(".inp_fileToUpload").live("change", function() {//现在这个已经适用于多个file表单。
15        ajaxFileUpload($(this).attr("id"), $(this).parent().children(".img_upload").attr("id"));
16       })
17      })
18      function ajaxFileUpload(file_id, img_id) {
19       jQuery.ajaxFileUpload({
20        url : '/upload/upload_json.ashx', //用于文件上传的服务器端请求地址
21        secureuri : false, //是否需要安全协议，一般设置为false
22        fileElementId : file_id, //文件上传域的ID
23        dataType : 'json', //返回值类型 一般设置为json
24        success : function(data, status)//服务器成功响应处理函数
25        {
26         if (data.error == 0) {
27          $("#" + img_id).attr("src", data.url);
28         } else {
29          alert(data.message);
30         }
31        },
32        error : function(data, status, e)//服务器响应失败处理函数
33        {
34         alert(e);
35        }
36       })
37       return false;
38      }
39     </script>
40    </div>
41   </div>

View Code