使用第三方插件上传图片
进行web编程时必然会遇到处理图片上传的问题，使用第三方插件来实现图片上传是最为快捷方便的途径，但是常常第三方插件有不符合我们需求的地方，因此作者将实际开发一个网站的过程中遇到的问题分享出来供大家参考，我在实际项目中使用了两个第三方插件来分别实现图片上传：kindeditor和meituxiuxiu，其中kindeditor是为了实现富文本编辑而使用的，没有遇到什么问题，所以本文主要将使用meituxiuxiu上传遇到的问题分享出来：
1.使用MeituXiuXiu来进行头像上传(http连接中使用)
2.认证注册页面的图片上传(https中如何使用MeituXiuXiu)
http连接内上传图片：
这是非常正常的一种使用方法，在第三方插件的官网上就可以查到参考代码很容易，下面也把代码粘贴在下面仅供参考，这是从一个以前开发的网站中截取的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>上传头像</title>
<link rel="shortcut icon" href="/images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/sources/xiuxiu.js" type="text/javascript"></script>
<!—请千万注意这里面的在线js只能在http连接中使用-->
<script type="text/javascript">
xiuxiu.setLaunchVars("quality", 50);
xiuxiu.setLaunchVars("maxFinalWidth", 960);//liuhj add for large size pic
window.onload = function () {
xiuxiu.embedSWF("altContent", 5, "100%", "100%","xiuxiuHead");
xiuxiu.setUploadURL("/xxxx.ashx”); //修改为您自己的上传接收图片程序
xiuxiu.onInit = function () {
xiuxiu.loadPhoto("/images/default_img.png"); //设置默认图片
}
xiuxiu.onUploadResponse = function (data) {
xiuxiu.remove("xiuxiuHead");
//图片上传完成后的处理，更新画面元素等动作
}
xiuxiu.onBeforeUpload = function (data, id)
{
//可以在这里限制图片上传size
return true;
}
}
</script>
Https中的图片上传
由于meituxiuxiu的脚本只能在http连接中使用，所以一些注册、认证等为了安全起见都需要使用https连接来实现，那么就没有办法使用Meituxiuxiu等第三方插件了，有什么解决办法吗？下面的示例代码和说明是在一个网站中截取的，你可以通过下面的方式来获得这段代码：访问，选择注册(不必真正注册)，然后选择学校注册，如下图（随便填写信息就可以）：
然后点击“下一步“，选择上传图片：
使用firefox的firebug（f12）选择脚本，查看ImageUpload.aspx就可以看到其实现的代码如下，请参见图片中的详细解释来实现：
请注意上述两个红色框起来的部分就是解决Https使用meituxiuxiu上传的图片的方法：1.需要使用本地的js脚本，请直接联系你选择的第三方插件客服来提供可以供本地使用js
脚本。
2.请按照图上的代码进行本地脚本运行前的配置。
特别提示：
如果你的网站使用了专门的Image服务器的话，请务必注意meituxiuxiu提供的crossdomain.xml文件一定要防止在图片站点的根目录下，而不是网站的根目录下，不然你会发现默认图片无法load的情况，这种bug是不容易发现的。
结语
至此，你已经可以使用第三方插件实现http和https中的所有图片上传动作了，是不是解决了可开发时的难题？希望可以帮到需要的人。