七牛 js上传图片

研究七牛好几天总算上传图片成功了在这分享分享完整代码

第一步、准备阶段

1、安装NuGet 使用NuGet管理程序包，在其中搜索qiniu即可(使用vs开发就很清楚nuget包了)

2、下载七牛的一些js （只需应用这两个js即可 plupload.full.min.js 和 qiniu.min.js）

第二步、在配置文件中加入你的AK和SK

 <!-- 七牛配置 -->
    <add key="USER_AGENT" value="" />
    <add key="ACCESS_KEY" value="" />
    <add key="SECRET_KEY" value="" />
    <add key="RS_HOST" value="http://rs.qiniu.com" />
    <add key="UP_HOST" value="http://up.qiniu.com" />
    <add key="RSF_HOST" value="http://rsf.qiniu.com" />
    <add key="PREFETCH_HOST" value="http://iovip.qiniu.com" />

第三步、获取token

/// <summary>
///
/// </summary>
/// <param name="bucket">仓库名</param>
/// <returns></returns>
public string GetUptoken(string bucket)
{
　　var put = new PutPolicy(bucket);
　　string uptoken = put.Token();
　　return "{\"uptoken\":\"" + uptoken + "\"}";
}

特别注意一定要在程序启动的时候调用Qiniu.Conf.Config.Init()进行初始化。 mvc程序的话直接在 Global.asax文件中初始化

 1  // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
 2     // visit http://go.microsoft.com/?LinkId=9394801
 3     public class MvcApplication : System.Web.HttpApplication
 4     {
 5         protected void Application_Start()
 6         {
 7             AreaRegistration.RegisterAllAreas();
 8 
 9             WebApiConfig.Register(GlobalConfiguration.Configuration);
10             FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
11             RouteConfig.RegisterRoutes(RouteTable.Routes);
12             
13             Qiniu.Conf.Config.Init();
14         }
15     }

第四步、html页面

 
 9 <div>
10     <input type="button" value="单张上传" id="btnUpload" />
12     <div id="upImg" style="margin-top: 10px;margin-bottom: 10px; style=width:300px;height:300px;border:1px solid wheat;">
13         <img src="/image/Null.jpg" />
14     </div>
15 </div>
24 
25 <script src="~/js/jquery/jquery-1.11.1.min.js"></script>
26 <script src="~/js/plupload/plupload.full.min.js"></script>
27 <script src="~/js/qiniu/qiniu.min.js"></script>
29 <script src="~/js/home.js"></script>
30 <script type="text/javascript">
31     $(function () {
32         $.home();
33     })
34 </script>

第五步、js代码

 1 jQuery.home = function () {
 2     $("#btnUpload").click(function () {
 3         initQiniuOnly(\'upImg\');
 4     });
 5 };
 6 
 7 //七牛上传单图
 8 var initQiniuOnly = function (area, datajson) {
 9     //单图上传
10     var onlyQiniu = new QiniuJsSDK();
11     var onlyUploader = onlyQiniu.uploader({
12         runtimes: \'html5,flash,html4\', //上传模式,依次退化
13         browse_button: \'btnUpload\', //上传选择的点选按钮，**必需**
14         uptoken_url: \'/Qiniu/GetUptoken?bucket=仓库名\', //获取token  bucket即是七牛上新建的仓库名称
15         unique_names: true,
16         domain: \'http://xxxxxx/\',  //访问仓库的域名  同样在七牛中可以找到
17         max_file_size: \'10mb\', //最大文件体积限制
18         flash_swf_url: \'/js/plupload/flash3581.swf\', //引入flash,相对路径
19         max_retries: 1, //上传失败最大重试次数
20         dragdrop: true, //开启可拖曳上传
21         drop_element: \'upImg\', //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
22         chunk_size: \'10mb\', //分块上传时，每片的体积
23         auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传
24         init: {
25             \'FileUploaded\': function (up, file, info) {
26                 var domain = up.getOption(\'domain\');
27                 var res = $.parseJSON(info);
28                 var sourceLink = domain + res.key;
29 
30                 $("#" + area + " img").attr("src", sourceLink);
31 
32             }
33         }
34     });
35 };

到此上传图片就完成了哦